fix: truncate proposal title (#875)

* fix: truncate proposal title * feat: use multi-line text
snapshot-labs · Oct 16, 2024 · 5e4fc01 · 5e4fc01
1 parent e20edfe
commit 5e4fc01
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/apps/ui/src/components/ProposalLabels.vue b/apps/ui/src/components/ProposalLabels.vue
@@ -35,15 +35,15 @@ watch(
 );
 </script>
 <template>
-  <div v-if="inline" class="contents">
-    <div
-      v-for="label in validLabels"
-      :key="label.id"
-      class="inline-flex mr-2 mb-2"
-    >
-      <UiProposalLabel :label="label.name" :color="label.color" />
+  <template v-if="inline">
+    <div v-for="label in validLabels" :key="label.id" class="inline-flex mr-2">
+      <UiProposalLabel
+        :label="label.name"
+        :color="label.color"
+        class="text-sm mb-1 max-w-[160px]"
+      />
     </div>
-  </div>
+  </template>
   <div v-else>
     <div class="flex justify-between mb-3">
       <h4 class="eyebrow" v-text="'Labels'" />

diff --git a/apps/ui/src/components/ProposalsListItemHeading.vue b/apps/ui/src/components/ProposalsListItemHeading.vue
@@ -44,7 +44,7 @@ const space = computed(() =>
         <ProposalIconStatus size="17" :state="proposal.state" class="top-1.5" />
       </AppLink>
 
-      <div class="md:min-w-0 my-1 items-center leading-6">
+      <div class="min-w-0 my-1 items-center leading-6">
         <AppLink
           v-if="showSpace"
           :to="{
@@ -66,10 +66,9 @@ const space = computed(() =>
               space: `${proposal.network}:${proposal.space.id}`
             }
           }"
-          class="md:min-w-0"
         >
           <h3
-            class="text-[21px] inline [overflow-wrap:anywhere] md:truncate mr-2"
+            class="text-[21px] inline [overflow-wrap:anywhere] mr-2 min-w-0"
             v-text="proposal.title || `Proposal #${proposal.proposal_id}`"
           />
           <ProposalLabels
@@ -82,7 +81,7 @@ const space = computed(() =>
             v-if="
               showVotedIndicator && votes[`${proposal.network}:${proposal.id}`]
             "
-            class="text-skin-success inline-block shrink-0 relative top-[-1px] md:top-0.5"
+            class="text-skin-success inline-block shrink-0 relative"
           />
         </AppLink>
       </div>