style: adjust grid layout for build and test pages. (#1802)

Author: André Luiz

dashboard/src/components/BuildDetails/BuildDetails.tsx

@@ -159,7 +159,7 @@ const BuildDetails = ({
             infos: [
               {
                 children: (
-                  <div className="grid grid-cols-2 gap-4">
+                  <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                     <DetailsInfoCard
                       cardTitle="buildDetails.buildInfo"
                       data={[

dashboard/src/components/Section/Section.tsx

@@ -95,9 +95,11 @@ export const Subsection = ({ infos, title }: ISubsection): JSX.Element => {
     <div className="border-dark-gray border-t pt-4">
       {title && <span className="text-xl">{title}</span>}
       {items.length > 0 && (
-        <div className="grid grid-cols-2 gap-x-8 gap-y-11 pb-4">{items}</div>
+        <div className="grid grid-cols-1 gap-x-8 gap-y-11 pb-4 md:grid-cols-2">
+          {items}
+        </div>
       )}
-      {children.length > 0 && <div className="mb-4 w-[80vw]">{children}</div>}
+      {children.length > 0 && <div className="mb-4">{children}</div>}
     </div>
   );
 };

dashboard/src/components/TestDetails/TestDetails.tsx

@@ -338,7 +338,7 @@ const TestDetailsSections = ({
           infos: [
             {
               children: (
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                   <DetailsInfoCard
                     cardTitle="testDetails.testInfo"
                     data={[