Fix response style

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.13",
       "license": "MIT",
       "dependencies": {
-        "@codex-storage/marketplace-ui-components": "^0.0.50",
+        "@codex-storage/marketplace-ui-components": "^0.0.51",
         "@codex-storage/sdk-js": "^0.0.16",
         "@sentry/browser": "^8.32.0",
         "@sentry/react": "^8.31.0",
@@ -395,9 +395,9 @@
       }
     },
     "node_modules/@codex-storage/marketplace-ui-components": {
-      "version": "0.0.50",
-      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.50.tgz",
-      "integrity": "sha512-pijYw8Wd/ns64Q7iSLQ444U5Q7Ql0U88OuxBycuxIOVp3obITJk6SBgdZpxHIj5kWShsUvXU/nJl0V0oKt9ieQ==",
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.51.tgz",
+      "integrity": "sha512-KPPFlcpx3a83WCBSLbRONrF/yr4J/ctyTfFPxMaRSMTRD1LtfIE0uPy3QxtHs6tigOts2h4DEz6Kn2ynHdfKPg==",
       "engines": {
         "node": ">=18"
       },

package.json

@@ -8,7 +8,7 @@
   "version": "0.0.13",
   "type": "module",
   "scripts": {
-    "dev": "vite --host 127.0.0.1 --port 5173",
+    "dev": "vite --host 0.0.0.0 --port 5173",
     "compile": "tsc --noEmit",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -26,7 +26,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.50",
+    "@codex-storage/marketplace-ui-components": "^0.0.51",
     "@codex-storage/sdk-js": "^0.0.16",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

src/components/AppBar/AppBar.tsx

@@ -28,7 +28,7 @@ type Props = {
 };
 
 const icons: Record<string, ReactElement> = {
-  dashboard: <DashboardIcon />,
+  dashboard: <DashboardIcon width={24} />,
   peers: <PeersIcon width={24} />,
   settings: <SettingsIcon width={24} />,
   files: <FilesIcon width={24} />,
@@ -83,7 +83,7 @@ export function AppBar({ onIconClick, onExpanded }: Props) {
         : "var(--codex-input-color-warning)";
 
   const icon = isMobile ? (
-    <Logo onClick={() => onExpanded(true)}></Logo>
+    <Logo onClick={() => onExpanded(true)} width={30}></Logo>
   ) : (
     icons[title]
   );

src/components/AppBar/appBar.css

@@ -45,6 +45,12 @@
       sans-serif;
     letter-spacing: -0.006em;
     color: rgba(150, 150, 150, 0.8);
+
+    @media (max-width: 800px) {
+      & {
+        display: none;
+      }
+    }
   }
 
   > div {
@@ -88,7 +94,7 @@
   }
 
   @media (max-width: 800px) {
-    aside {
+    .wallet-login {
       display: none;
     }
   }

src/components/Availability/Sunburst.tsx

@@ -36,6 +36,16 @@ export function Sunburst({ availabilities, space }: Props) {
     }
   }, [chart, div]);
 
+  useEffect(() => {
+    const refresh = () => chart.current?.resize();
+
+    window.addEventListener("resize", refresh);
+
+    return () => {
+      window.removeEventListener("resize", refresh);
+    };
+  }, [chart.current]);
+
   const data = availabilities.map((a, index) => {
     return {
       name: Strings.shortId(a.id),
@@ -170,6 +180,8 @@ export function Sunburst({ availabilities, space }: Props) {
     };
 
     chart.current.setOption(option);
+    chart.current?.resize();
+
     // chart.current.off("click");
     // chart.current.on("click", function (params) {
     //   // console.info(params.componentIndex);
@@ -196,7 +208,6 @@ export function Sunburst({ availabilities, space }: Props) {
       ref={div}
       className="sunburst"
       style={{
-        width: size,
         height: size,
       }}></div>
   );

src/components/Card/Card.css

@@ -4,6 +4,13 @@
   padding: 16px;
   background-color: rgb(35, 35, 35);
 
+  @media (max-width: 800px) {
+    &,
+    td:nth-child(2) {
+      padding: 8px;
+    }
+  }
+
   > header {
     display: flex;
     align-items: center;

src/components/ConnectedAccount/WalletCard.css

@@ -225,6 +225,5 @@
 
   .lines {
     height: 200;
-    transform: scale(1.25);
   }
 }

src/components/ConnectedAccount/WalletCard.tsx

@@ -33,6 +33,16 @@ export function WalletCard({ tab }: Props) {
     }
   }, [chart, div]);
 
+  useEffect(() => {
+    const refresh = () => chart.current?.resize();
+
+    window.addEventListener("resize", refresh);
+
+    return () => {
+      window.removeEventListener("resize", refresh);
+    };
+  }, [chart.current]);
+
   const onCurrencyChange = async (e: ChangeEvent<HTMLSelectElement>) => {
     const value = e.currentTarget.value;
     setCurrency(value);
@@ -90,6 +100,14 @@ export function WalletCard({ tab }: Props) {
         type: "value",
         show: false,
       },
+      grid: [
+        {
+          left: 0,
+          right: 0,
+          top: 50,
+          bottom: 50,
+        },
+      ],
       series: [
         {
           data: [220, 932, 401, 934, 1290, 1330, 1450].slice(0, data.length),
@@ -107,7 +125,7 @@ export function WalletCard({ tab }: Props) {
       },
     };
 
-    chart.current.setOption(option);
+    chart.current.setOption(option, true);
   }
 
   return (
@@ -133,7 +151,10 @@ export function WalletCard({ tab }: Props) {
         <section>
           {/* <WalletChart></WalletChart> */}
           {/* <WalletLines></WalletLines> */}
-          <div className="lines" ref={div} style={{ height: 200 }}></div>
+          <div
+            className="lines"
+            ref={div}
+            style={{ height: 200, width: "100%" }}></div>
         </section>
       </main>
 

src/components/LogLevel/LogLevel.css

@@ -7,6 +7,12 @@
   > div:first-child {
     position: relative;
 
+    @media (max-width: 800px) {
+      & {
+        flex: 1;
+      }
+    }
+
     svg {
       position: absolute;
       top: 11px;
@@ -22,5 +28,11 @@
   select {
     border-color: rgba(150, 150, 150, 1);
     padding-left: 40px;
+
+    @media (max-width: 800px) {
+      & {
+        width: 100%;
+      }
+    }
   }
 }

src/components/Menu/Menu.tsx

@@ -16,6 +16,7 @@ import PurchaseIcon from "../../assets/icons/purchase.svg?react";
 import HostIcon from "../../assets/icons/host.svg?react";
 import LogsIcon from "../../assets/icons/logs.svg?react";
 import SettingsIcon from "../../assets/icons/settings.svg?react";
+import CloseIcon from "../../assets/icons/close.svg?react";
 import HelpIcon from "../../assets/icons/help.svg?react";
 import DisclaimerIcon from "../../assets/icons/disclaimer.svg?react";
 import { NavLink } from "react-router-dom";
@@ -65,6 +66,8 @@ export function Menu({ isExpanded, onExpanded }: Props) {
     }
   };
 
+  const Icon = isMobile ? CloseIcon : ExpandIcon;
+
   return (
     <>
       <aside
@@ -77,7 +80,7 @@ export function Menu({ isExpanded, onExpanded }: Props) {
             <Logo onClick={onLogoClick} width={30} />
             <Logotype height={34} />
             <div>
-              <ExpandIcon onClick={onExpandMenu}></ExpandIcon>
+              <Icon onClick={onExpandMenu}></Icon>
             </div>
           </header>
 
@@ -142,20 +145,20 @@ export function Menu({ isExpanded, onExpanded }: Props) {
             </NavLink>
             <NavLink onClick={onClose} to="/dashboard/availabilities">
               <span>
-                <HostIcon />
+                <HostIcon width={20} height={20} />
               </span>
               <span>Host</span>
             </NavLink>
             <hr />
             <NavLink onClick={onClose} to="/dashboard/peers">
               <span>
-                <PeersIcon width={20} />
+                <PeersIcon width={20} height={20} />
               </span>
               <span>Peers</span>
             </NavLink>
             <NavLink onClick={onClose} to="/dashboard/logs">
               <span>
-                <LogsIcon width={24} />
+                <LogsIcon width={20} height={20} />
               </span>
               <span>Log</span>
             </NavLink>

src/components/Menu/menu.css

@@ -19,6 +19,7 @@
       left: -300px;
       position: fixed;
       z-index: 12;
+      width: 100%;
     }
 
     &[aria-expanded] {

src/components/OnBoarding/OnBoardingLayout.css

@@ -36,6 +36,12 @@
 
   section > *:first-child {
     flex: 0.5;
+
+    @media (max-width: 800px) {
+      & {
+        flex: 0.2;
+      }
+    }
   }
 
   h1 {
@@ -203,6 +209,12 @@
     right: 6rem;
     bottom: 16px;
 
+    @media (max-width: 800px) {
+      & {
+        right: 16px;
+      }
+    }
+
     &:hover {
       animation-name: example;
       animation-duration: 2.5s;

src/components/Peers/PeersCard.css

@@ -18,6 +18,12 @@
     top: -35px;
     bottom: 0;
     margin: auto;
+
+    @media (max-width: 800px) {
+      & {
+        transform: scale(0.8);
+      }
+    }
   }
 
   footer {

src/routes/dashboard/availabilities.css

@@ -6,6 +6,12 @@
 
   > .card {
     flex: 1 1 50%;
+
+    @media (max-width: 800px) {
+      & {
+        flex: 1 1 100%;
+      }
+    }
   }
 
   .table {

src/routes/dashboard/logs.css

@@ -35,8 +35,19 @@
   }
 
   .button {
-    width: 187px;
     gap: 8px;
+
+    @media (min-width: 801px) {
+      & {
+        width: 187px;
+      }
+    }
+
+    @media (max-width: 800px) {
+      span {
+        display: none;
+      }
+    }
   }
 }
 

src/routes/dashboard/peers.css

@@ -175,4 +175,12 @@
   .gauge {
     margin: auto;
   }
+
+  @media (max-width: 800px) {
+    .peers-chart {
+      transform: scale(0.8);
+      margin: auto;
+      left: 0;
+    }
+  }
 }

src/routes/root.css

@@ -8,9 +8,9 @@
     background-color: rgb(20, 20, 20);
 
     > div {
-      padding: 16px;
+      padding: 8px;
 
-      @media (min-width: 1000px) {
+      @media (min-width: 800px) {
         padding: 24px 48px;
       }
     }