chore: fixed styles

wizeline · Mar 26, 2024 · 59005f9 · 59005f9
1 parent a31eb1d
commit 59005f9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/app/components/charts/BubbleChart.tsx b/app/components/charts/BubbleChart.tsx
@@ -66,7 +66,7 @@ const BubbleChart: FC<BubbleChartProps> = ({
       .attr("height", height)
       .attr(
         "style",
-        `position: absolute; top: -40; max-width: 100%; height: auto; display: block; margin: 0 -14px; background: transparent; cursor: pointer;`
+        `position: absolute;${isDesktop ? " top: -40;" : ""} max-width: 100%; height: auto; display: block; margin: 0 -14px; background: transparent; cursor: pointer;`
       );
 
     const node = svg

diff --git a/app/components/tables/AIProductTable.tsx b/app/components/tables/AIProductTable.tsx
@@ -158,7 +158,7 @@ const AIProductTable: FC<AIProductTableProps> = ({
         </Select>
       </div>
       <div className="mt-6">
-        <div className="w-[900px] h-[700px] border border-top-nav-border rounded overflow-auto !text-white mt-6 items-center">
+        <div className="w-auto h-[700px] border border-top-nav-border rounded overflow-auto !text-white mt-6 items-center">
           <TableContainer className="max-h-[700px]">
             <Table stickyHeader>
               <TableHead>

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -12,6 +12,7 @@ import ViewSwitcher, { ViewType } from "~/components/navigation/ViewSwitcher";
 import AIProductTable from "~/components/tables/AIProductTable";
 import { ZoomControl } from "~/components/zoom/ZoomControl";
 import { ModalContext } from "~/context/ModalContext";
+import { useScreenSize } from "~/context/ScreenSizeContext";
 import { NotificationType } from "~/types";
 import { zoomFeatureFlag } from "~/utils/featureFlags";
 
@@ -33,6 +34,7 @@ export default function Index() {
   const [nodeAncestors, setNodeAncestors] = useState<string[]>([]);
   const [zoomPercentage, setZoomPercentage] = useState(100);
   const [productName, setProductName] = useState("");
+  const { isDesktop } = useScreenSize();
 
   const handleIsInfoModalClose = () => {
     setProductName("");
@@ -114,15 +116,15 @@ export default function Index() {
         {!jsonData || !jsonModalData ? (
           <Loader />
         ) : (
-          <div className="min-h-screen mx-36 flex flex-col justify-between items-center relative overflow-x-hidden z-10">
+          <div className={`${isDesktop ? "min-h-screen mx-36 flex flex-col justify-between items-center relative overflow-x-hidden z-10" : ""}`}>
             <div
               className={`absolute w-full h-full transition-all duration-500 ease-in-out transform ${
                 currentView === ViewType.BubbleChart
                   ? "translate-x-0"
                   : "-translate-x-full"
               }`}
             >
-              <div className="min-h-screen flex flex-col justify-between items-center">
+              <div className={`min-h-screen flex flex-col ${isDesktop ? "justify-between" : "justify-around"} items-center`}>
                 {/* Use this if you want to display the Sunburst chart instead of the Bubble chart */}
                 {/*<SunburstChart
                   data={jsonData}
@@ -137,7 +139,7 @@ export default function Index() {
                 />
               </div>
             </div>
-            <div
+            {isDesktop && <div
               className={`absolute w-full h-full transition-all duration-500 ease-in-out transform ${
                 currentView === ViewType.BubbleChart
                   ? "translate-x-full"
@@ -150,7 +152,7 @@ export default function Index() {
                   onViewDetails={setProductName}
                 />
               </div>
-            </div>
+            </div>}
           </div>
         )}
         {currentView === ViewType.BubbleChart && (