Style: Fix info grid responsivness

betaflight · Oct 28, 2024 · 8e93b46 · 8e93b46
1 parent 6391cfb
commit 8e93b46
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/SpecGrid/SpecBox.tsx b/src/components/SpecGrid/SpecBox.tsx
@@ -17,25 +17,25 @@ export default function SpecBox({ icon, title, color, children, colSpan = 1 }) {
       bgColor = 'bg-primary-500/10';
       primaryTextColor = 'text-primary-500';
       secondaryTextColor = '';
-      childFontSize = '2xl:text-2xl lg:text-xl text-2xl';
+      childFontSize = '2xl:text-2xl lg:text-xl text-lg';
       break;
     case 'neutral':
       bgColor = 'bg-neutral-500/20';
       primaryTextColor = '';
       secondaryTextColor = '';
-      childFontSize = '2xl:text-2xl lg:text-xl text-2xl';
+      childFontSize = '2xl:text-2xl lg:text-xl text-lg';
       break;
     case 'neutral-light':
       bgColor = 'bg-neutral-500/10';
       primaryTextColor = '';
       secondaryTextColor = '';
-      childFontSize = '2xl:text-xl lg:text-xl text-xl';
+      childFontSize = '2xl:text-xl lg:text-xl text-base';
       break;
     default:
       bgColor = 'bg-neutral-500/10';
       primaryTextColor = '';
       secondaryTextColor = '';
-      childFontSize = '2xl:text-2xl lg:text-xl text-2xl';
+      childFontSize = '2xl:text-xl lg:text-xl text-base';
   }
 
   let colSpanClass = 'col-span-1';
@@ -55,7 +55,7 @@ export default function SpecBox({ icon, title, color, children, colSpan = 1 }) {
     <div className={`${bgColor} ${colSpanClass} rounded-lg flex flex-col gap-2 p-4`}>
       <div className={`flex items-center gap-1 ${primaryTextColor}`}>
         {icon}
-        <div className="font-bold">{title}</div>
+        <div className="font-semibold">{title}</div>
       </div>
       <div className={`${secondaryTextColor} ${childFontSize} font-semibold`}>{children}</div>
     </div>

diff --git a/src/components/SpecGrid/index.tsx b/src/components/SpecGrid/index.tsx
@@ -24,9 +24,9 @@ export default function VersionInfo({ children }) {
   const { target = '', mcu = '', imu = '', osd = '', barometer = '', blackbox: flash = '', dimensions = '', mounting = '', weight = '' } = specs;
 
   return (
-    <div className="w-full flex lg:flex-row flex-col gap-2">
+    <div className="w-full flex 2xl:flex-row flex-col gap-2">
       <div className="aspect-square w-fit rounded-lg overflow-clip">{children}</div>
-      <div className="aspect-square w-full h-fit grid grid-cols-3 grid-rows-3 gap-2">
+      <div className="2xl:aspect-square w-full h-fit grid grid-cols-3 grid-rows-3 gap-2">
         <SpecBox icon={<Crosshair size={24} />} title="Target:" color="primary" colSpan={2}>
           <div className="font-mono">{target}</div>
         </SpecBox>
@@ -46,7 +46,7 @@ export default function VersionInfo({ children }) {
           {flash}
         </SpecBox>
         <SpecBox icon={<Ruler />} title="Measurements:" color="neutral-light" colSpan={2}>
-          <div>
+          <div className="flex gap-2 flex-wrap">
             <div>Size: {dimensions}</div>
             <div>Mounting: {mounting}</div>
             <div>Weight: {weight}</div>