Merge pull request #260 from chingu-x/fix/feature-widget-padding-issue

Fix/feature widget padding issue
chingu-x · Oct 6, 2024 · 7766209 · 7766209
2 parents 2169bc2 + 12b8a29
commit 7766209
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/DashboardWidget.tsx
@@ -50,18 +50,18 @@ function DashboardWidget({
       >
         <div className="inline-flex max-w-[100px] items-start text-neutral-focus">
           <p
-            className={`relative inline-block text-[13px] font-semibold ${
+            className={`relative inline-block font-semibold ${
               isWidgetClickable
                 ? "cursor-pointer text-primary"
                 : "text-neutral-focus"
             }`}
           >
             {headerTitle}
-            {isWidgetClickable ? (
-              <div className="absolute right-[-15px] top-[4px]">
-                <ChevronDoubleRightIcon className="ml-1 w-3" />
+            {isWidgetClickable && (
+              <div className="absolute right-0 top-1/2 translate-x-[110%] translate-y-[-45%]">
+                <ChevronDoubleRightIcon className="h-3 w-3" />
               </div>
-            ) : null}
+            )}
           </p>
         </div>
 

diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/FeaturesStateContent.tsx
@@ -5,16 +5,14 @@ interface FeaturesStateContentProps {
 }
 function FeaturesStateContent({ contentObject }: FeaturesStateContentProps) {
   return (
-    <div className="mt-4 flex h-full flex-col justify-center">
-      <div className="flex max-h-[200px] w-full flex-col overflow-auto pr-3">
+    <div className="mt-4 flex h-full flex-col justify-start">
+      <div className="flex max-h-[200px] w-full flex-col gap-y-3 overflow-auto pr-3">
         {contentObject?.map((item) => (
           <div
             key={item}
-            className="mb-3 flex h-[35px] items-center truncate rounded-lg bg-base-200 px-3 py-2"
+            className="flex items-center rounded-lg bg-base-200 px-3 py-2"
           >
-            <p className="w-40 truncate max-[1469px]:w-[300px] max-[1200px]:w-full">
-              {item}
-            </p>
+            <p className="w-full break-words font-semibold">{item}</p>
           </div>
         ))}
       </div>