chore: make the sentiment line responsive based on the content

Signed-off-by: Efren Lim <[email protected]>

Author: emlimlf

frontend/app/components/modules/project/components/community/fragments/card-content.vue

@@ -8,10 +8,9 @@ SPDX-License-Identifier: MIT
       <div class="flex lg:flex-row flex-col flex-wrap items-start lg:gap-8 gap-4">
         <div class="flex gap-3 items-stretch flex-1 min-w-0">
           <!-- Sentiment Icon -->
-          <lfx-community-sentiment-icon
-            :sentiment-label="mention.sentimentLabel"
-            :hide-bar="mention.body === null || mention.body === ''"
-          />
+          <div class="relative w-5 shrink-0 overflow-hidden">
+            <lfx-community-sentiment-icon :sentiment-label="mention.sentimentLabel" />
+          </div>
 
           <!-- Text Content -->
           <div class="flex-1 min-w-0 overflow-hidden">

frontend/app/components/modules/project/components/community/fragments/sentiment-icon.vue

@@ -3,7 +3,7 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <div class="flex flex-col items-center gap-2 py-1 w-5 shrink-0">
+  <div class="flex flex-col items-center gap-2 py-1 w-5 shrink-0 absolute top-0 bottom-0">
     <lfx-icon
       :name="sentimentIcon"
       type="regular"