fixed excess scrolling issue in summary tab in patient consultation (#…

…5127)
ohcnetwork · Mar 21, 2023 · e9b32e3 · e9b32e3
1 parent d039056
commit e9b32e3
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx b/src/Components/Facility/Consultations/PrimaryParametersPlot.tsx
@@ -141,11 +141,11 @@ export const PrimaryParametersPlot = ({
   });
   return (
     <div>
-      <div className="grid grid-row-1 md:grid-cols-2 gap-4">
-        <div className="md:w-full w-screen m-2 pt-4 px-4 bg-white border rounded-lg shadow">
+      <div className="grid md:grid-cols-2 gap-4">
+        <div className="md:w-full overflow-x-auto m-2 pt-4 px-4 bg-white border rounded-lg shadow">
           <StackedLinePlot title="BP" xData={dates} yData={BPData} />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow">
           <LinePlot
             title="Pulse"
             name="Pulse"
@@ -155,26 +155,26 @@ export const PrimaryParametersPlot = ({
             high={100}
           />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow">
           <LinePlot
             title="Temperature (F)"
             name="Temperature"
             xData={dates}
             yData={yAxisData("temperature")}
           />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow">
           <LinePlot
             title="Resp"
             name="Resp"
             xData={dates}
             yData={yAxisData("resp")}
           />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow">
           <StackedLinePlot title="Insulin" xData={dates} yData={InsulinData} />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow">
           <LinePlot
             title="SPO2 (%)"
             name="spo2"
@@ -184,7 +184,7 @@ export const PrimaryParametersPlot = ({
             high={100}
           />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow">
           <LinePlot
             title="Ventilator FIO2 (%)"
             name="fio2"
@@ -194,7 +194,7 @@ export const PrimaryParametersPlot = ({
             high={60}
           />
         </div>
-        <div className="md:w-full w-screen pt-4 m-2 px-4 bg-white border rounded-lg shadow h-80">
+        <div className="md:w-full overflow-x-auto pt-4 m-2 px-4 bg-white border rounded-lg shadow h-80">
           <h3 className="text-sm px-3 mb-2">Rhythm</h3>
           <div className="flow-root m-2 overflow-y-scroll h-64">
             <ul role="list" className="-mb-8">