layout fixes - fix overflow, make desktop use white space, reduce pad…

…ding on mobile, keep table headers etc. fixed at w-1/3
ISISComputingGroup · Nov 12, 2024 · 30f1a5b · 30f1a5b
1 parent 90cb9fc
commit 30f1a5b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/app/components/Block.tsx b/app/components/Block.tsx
@@ -45,7 +45,7 @@ export default function Block({
         setShowAdvanced(!showAdvanced);
       }}
     >
-      <td className="py-1 px-4">
+      <td className="py-1 px-2 w-1/3">
         <a
           className="underline"
           href={
@@ -60,7 +60,7 @@ export default function Block({
         </a>
       </td>
 
-      <td className="py-1 px-4 ">
+      <td className="py-1 px-2 w-1/3">
         <span id={pv.human_readable_name + "_VALUE"}>
           {showAdvanced && "Readback: "}
           {pv.value} {pv.units != null && pv.units}
@@ -91,7 +91,7 @@ export default function Block({
           )}
         </span>
       </td>
-      <td className="py-1 px-4 flex justify-between items-center">
+      <td className="py-1 px-2  flex justify-between items-center">
         <span id={pv.human_readable_name + "_VALUE_RC"}>
           {pv.runcontrol_enabled && (pv.runcontrol_inrange ? "✅" : "❌")}
         </span>

diff --git a/app/components/Group.tsx b/app/components/Group.tsx
@@ -28,14 +28,14 @@ export default function Group({
         {group.name}
       </h1>
       <table className="text-sm table-fixed">
-        <thead>
-          <tr className="bg-blue-gray-100 text-gray-100">
-            <th className="py-3 px-4 text-left">Block</th>
-            <th className="py-3 px-4 text-left">Value</th>
-            <th className="py-3 px-4 text-left">In-Range</th>
+        <thead className="sticky">
+          <tr className="bg-blue-gray-100 text-gray-100 border-b-2 border-b-gray-400">
+            <th className="py-2 px-2 text-left w-1/3">Block</th>
+            <th className="py-2 px-2 text-left w-1/3">Value</th>
+            <th className="py-2 px-2 text-left w-1/3">In-Range</th>
           </tr>
         </thead>
-        <tbody className="text-gray-200 ">
+        <tbody className="text-gray-200 sticky">
           {group.blocks.map((pv) => {
             return (
               <Block

diff --git a/app/components/InstrumentPage.tsx b/app/components/InstrumentPage.tsx
@@ -264,7 +264,7 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
     return <h1>Loading...</h1>;
   }
   return (
-    <div className="p-8 w-full mx-auto max-w-7xl">
+    <div className="p-2 md:p-8 w-full mx-auto">
       <TopBar
         dashboard={currentInstrument.dashboard}
         instName={instName}

diff --git a/app/components/__snapshots__/Block.test.tsx.snap b/app/components/__snapshots__/Block.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders topbar unchanged 1`] = `
     class="border-b border-blue-gray-200 transition duration-100 hover:bg-gray-100 hover:text-black"
   >
     <td
-      class="py-1 px-4"
+      class="py-1 px-2 w-1/3"
     >
       <a
         class="underline"
@@ -15,7 +15,7 @@ exports[`renders topbar unchanged 1`] = `
       />
     </td>
     <td
-      class="py-1 px-4 "
+      class="py-1 px-2 w-1/3"
     >
       <span
         id="undefined_VALUE"
@@ -32,7 +32,7 @@ exports[`renders topbar unchanged 1`] = `
       </span>
     </td>
     <td
-      class="py-1 px-4 flex justify-between items-center"
+      class="py-1 px-2  flex justify-between items-center"
     >
       <span
         id="undefined_VALUE_RC"