Browse Source

💄 style(SupplyChainDashboards): optimize PopupInfoBox layout

- remove fixed height constraint from title container for better content adaptation
- add w-full to subtitle container and text element to ensure proper text wrapping
- adjust layout to prevent content overflow in PopupInfoBox component
yourname 2 months ago
parent
commit
2e4076e787

+ 4 - 4
src/client/home/pages/SupplyChainDashboards/components/PopupInfoBox.tsx

@@ -60,14 +60,14 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
         <div className="absolute content-stretch flex flex-col gap-[12px] items-center left-[29.81px] top-[31.73px] w-[420px]">
           {/* 标题区域 */}
           <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
-            <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0">
+            <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
               <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[36px] text-lime-200 whitespace-nowrap">
                 <p className="leading-[32px]">{displayData.title}</p>
               </div>
             </div>
-            <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full">
-              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white">
-                <p className="leading-[32px] bg-gradient-to-b from-white to-sky-400 bg-clip-text text-transparent break-words">{displayData.subtitle}</p>
+            <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full">
+              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white w-full">
+                <p className="leading-[32px] bg-gradient-to-b from-white to-sky-400 bg-clip-text text-transparent break-words w-full">{displayData.subtitle}</p>
               </div>
             </div>
           </div>