sort topbar out and use a grid

ISISComputingGroup · Nov 12, 2024 · fd33631 · fd33631
1 parent 8138f32
commit fd33631
Show file tree

Hide file tree

Showing 2 changed files with 480 additions and 229 deletions.
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
@@ -58,29 +58,31 @@ export default function TopBar({
           {instName.toUpperCase()} is{" "}
           <span id={"runStateSpan"}>{getRunstate(runInfoPVs)}</span>
         </h2>
-        <h3 className="text-black text-wrap max-w-full break-all">
+        <h3 className="text-black text-wrap max-w-full break-all py-2 font-semibold">
           Config:{" "}
-          <span id={"configNameSpan"} className="font-semibold">
+          <span id={"configNameSpan"}>
             {findPVByHumanReadableName(runInfoPVs, configName)
               ? findPVByHumanReadableName(runInfoPVs, configName)!.value
               : "UNKNOWN"}
           </span>
         </h3>
 
-        <div className="bg-gray-50 border-2 border-gray-800 shadow-md flex flex-col">
+        <div className="bg-gray-50 border-2 border-gray-800 shadow-md flex flex-col max-w-full w-full">
           <table
             id={"dashboardTable"}
-            className="text-sm w-full table-fixed flex divide-x divide-gray-200 "
+            className="text-sm max-w-full table-fixed flex divide-x divide-gray-200 text-wrap "
           >
             {dashboard.map((column: Array<Array<IfcPV>>, index: number) => (
-              <tbody key={index} id={index.toString()}>
+              <tbody key={index} id={index.toString()} className="w-1/3">
                 {column.map((row: Array<IfcPV>, index: number) => (
                   <tr
                     key={index}
-                    className="[&:not(:last-child)]:border-b border-gray-300 text-black transition duration-100 hover:bg-gray-700 hover:text-white"
+                    className="[&:not(:last-child)]:border-b border-gray-300 text-black transition duration-100 hover:bg-gray-700 hover:text-white md:flex"
                   >
-                    <td className="py-1 px-4 flex font-bold">{row[0].value}</td>
-                    <td className="py-1 px-4 flex justify-between items-center">
+                    <td className="py-1 px-4 flex font-bold break-words">
+                      {row[0].value}
+                    </td>
+                    <td className="py-1 px-4 flex justify-between items-center break-all">
                       <span className="font-light">
                         {row[1].value != null ? row[1].value : "Hidden/unknown"}
                       </span>
@@ -92,20 +94,23 @@ export default function TopBar({
           </table>
         </div>
 
-        <label
-          id={"runInfoLabel"}
-          className="pt-2 max-w-full break-all text-wrap"
-        >
+        <label id={"runInfoLabel"} className="p-2 w-full">
           <input className="peer/showLabel absolute scale-0" type="checkbox" />
-          <span className="block max-h-14 overflow-hidden rounded-lg bg-gray-50 hover:bg-gray-800 hover:text-white px-4 py-0 mb-2  shadow-lg transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer">
-            <h3 className="flex h-14 cursor-pointer items-center font-bold ">
+          <span className="block max-h-14 overflow-hidden rounded-lg bg-gray-50 hover:bg-gray-800 hover:text-white px-4 py-0 mb-2  shadow-lg transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer items-center">
+            <h3 className="flex h-14 cursor-pointer font-bold text-center items-center justify-center">
               Show/hide all run information
             </h3>
-            {runInfoPVs.map((runInfoPV) => (
-              <p className="mb-2" key={runInfoPV.human_readable_name}>
-                {runInfoPV.human_readable_name}: {runInfoPV.value}
-              </p>
-            ))}
+            <div className="grid md:grid-cols-5 gap-2">
+              {runInfoPVs.map((runInfoPV) => (
+                <div
+                  className="mb-2 shadow-sm rounded-md"
+                  key={runInfoPV.human_readable_name}
+                >
+                  <p className="font-bold">{runInfoPV.human_readable_name}:</p>{" "}
+                  <p className="break-all">{runInfoPV.value}</p>
+                </div>
+              ))}
+            </div>
           </span>
         </label>
       </div>