Merge pull request #164 from holochain-apps/fix/group-name-overflow

Fix/group name overflow
holochain-apps · Oct 21, 2024 · 6c30110 · 6c30110
2 parents 29b082f + f16bdba
commit 6c30110
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/ui/src/lib/Header.svelte b/ui/src/lib/Header.svelte
@@ -1,3 +1,3 @@
-<div class='flex flex-row flex-shrink-0 items-center w-full pt-4 px-4 relative'>
+<div class='flex flex-row items-center w-full pt-4 px-4 relative'>
   <slot></slot>
 </div>
diff --git a/ui/src/routes/conversations/[id]/+page.svelte b/ui/src/routes/conversations/[id]/+page.svelte
@@ -260,29 +260,29 @@
 </script>
 
 <Header>
-  <a class='pr-5' href={`/conversations${conversation?.archived ? '/archive' : ''}`}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></a>
+  <a class='flex-none pr-5' href={`/conversations${conversation?.archived ? '/archive' : ''}`}><SvgIcon icon='caretLeft' color={$modeCurrent ? '%232e2e2e' : 'white'} size='10' /></a>
   {#if conversation}
-    <h1 class="flex-1 grow text-center">
-      <a href={`/conversations/${conversationId}/details`} class='pl-5 flex flex-row items-center justify-center'>
+    <h1 class="grow text-center self-center block whitespace-nowrap overflow-hidden text-ellipsis">
+      <a href={`/conversations/${conversationId}/details`} class="w-full">
         {conversation.title}
-        <button class='ml-2' on:click={() => goto(`/conversations/${conversationId}/details`)}>
-          <SvgIcon icon='gear' size='18' color={$modeCurrent ? '%232e2e2e' : 'white'} />
-        </button>
       </a>
     </h1>
+    <button class='self-center pl-2' on:click={() => goto(`/conversations/${conversationId}/details`)}>
+      <SvgIcon icon='gear' size='18' color={$modeCurrent ? '%232e2e2e' : 'white'} />
+    </button>
     {#if conversation.data.privacy === Privacy.Public || encodeHashToBase64(conversation.data.progenitor) === myPubKeyB64}
-      <a class='pl-5' href={`/conversations/${conversation.data.id}/${conversation.data.privacy === Privacy.Public ? 'details' : 'invite'}`}>
+      <a class='pl-5 flex-none' href={`/conversations/${conversation.data.id}/${conversation.data.privacy === Privacy.Public ? 'details' : 'invite'}`}>
         <SvgIcon icon='addPerson' size='24' color={$modeCurrent ? '%232e2e2e' : 'white'} />
       </a>
     {:else}
-      <span class='pl-8'>&nbsp;</span>
+      <span class='pl-8 flex-none'>&nbsp;</span>
     {/if}
   {/if}
 </Header>
 
 {#if conversation && typeof $processedMessages !== 'undefined'}
   <div class="container mx-auto flex justify-center items-center flex-col flex-1 overflow-hidden w-full">
-    <div class='overflow-y-auto flex flex-col grow items-center w-full pt-10' bind:this={conversationContainer} id='message-container'>
+    <div class='relative overflow-y-auto overflow-x-hidden flex flex-col grow items-center w-full pt-10' bind:this={conversationContainer} id='message-container'>
       {#if conversation.privacy === Privacy.Private}
         <div class='flex gap-4 items-center justify-center'>
           {#if encodeHashToBase64(conversation.data.progenitor) !== myPubKeyB64 && numMembers === 1}
@@ -303,7 +303,7 @@
       {:else if conversation.data?.config.image}
         <img src={conversation.data?.config.image} alt='Conversation' class='w-32 h-32 min-h-32 mb-5 rounded-full object-cover' />
       {/if}
-      <h1 class='text-3xl flex-shrink-0 mb-1 text-nowrap text-ellipsis overflow-hidden'>{conversation.title}</h1>
+      <h1 class='text-3xl b-1 break-all'>{conversation.title}</h1>
       <!-- if joining a conversation created by someone else, say still syncing here until there are at least 2 members -->
       <a href={`/conversations/${conversationId}/details`} class='text-sm'>
         {$tAny('conversations.num_members', { count: numMembers })}

diff --git a/ui/src/routes/conversations/[id]/details/+page.svelte b/ui/src/routes/conversations/[id]/details/+page.svelte
@@ -62,7 +62,7 @@
 {#if conversation}
   {@const numMembers = Object.values(conversation.data.agentProfiles).length}
 
-  <div class="container mx-auto flex items-center flex-col flex-1 overflow-hidden w-full pt-10">
+  <div class="container mx-auto flex items-center flex-col flex-1 overflow-hidden relative w-full pt-10">
     {#if conversation.privacy === Privacy.Private}
       <div class='flex gap-4 items-center justify-center'>
         {#each conversation.allMembers.slice(0, 2) as contact, i}
@@ -103,10 +103,10 @@
       {/if}
     {/if}
     {#if editingTitle}
-      <div class="flex flex-row items-center justify-center">
+      <div class="flex flex-row items-center justify-center flex-wrap">
         <input
           autofocus
-          class='text-3xl text-center bg-surface-900 border-none outline-none focus:outline-none pl-0.5 pt-0 focus:ring-0'
+          class='grow text-3xl text-center bg-surface-900 border-none outline-none focus:outline-none pl-0.5 pt-0 focus:ring-0'
           type='text'
           placeholder={$t('conversations.enter_name_here')}
           name='title'
@@ -118,6 +118,7 @@
             if (event.key === 'Escape') cancelEditTitle();
           }}
         />
+        <div class="flex flex-none items-center justify-center">
           <Button
             moreClasses="h-6 w-6 rounded-md py-0 !px-0 mb-0 mr-2 bg-primary-100 flex items-center justify-center"
             onClick={() => saveTitle()}
@@ -130,10 +131,11 @@
           >
             <SvgIcon icon='x' color='gray' size='12' />
           </Button>
+        </div>
       </div>
     {:else}
-      <div class="flex row">
-        <h1 class='text-3xl flex-shrink-0 mb-1 mr-1 text-nowrap text-ellipsis overflow-hidden'>
+      <div class="flex">
+        <h1 class='text-3xl mb-1 mr-1 break-all'>
           {title}
         </h1>
         {#if conversation.privacy !== Privacy.Private}