fix spacing for mobile

Author: =

examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx

@@ -61,7 +61,7 @@ export const Explorer = React.forwardRef(
     return (
       <div
         className={cn(
-          'md:grid grid-cols-[242px_1fr] gap-4 rounded-05 bg-surfaceDefault shadow-elementCard p-6'
+          'md:grid grid-cols-[242px_1fr] gap-4 rounded-05 md:bg-surfaceDefault md:shadow-elementCard md:p-6'
         )}
       >
         <div className="hidden md:block">

examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx

@@ -120,7 +120,7 @@ export const Content = ({ data }: { data: IProps }) => {
 
       <div className="mt-4 px-2 md:container py-1 lg:py-2">
         <div className="flex gap-4 flex-wrap justify-start md:flex-nowrap">
-          <div className="flex">
+          <div className="hidden md:flex">
             <Image
               src={schemes[data.scheme].logo}
               alt=""
@@ -228,7 +228,7 @@ const TabLayout = ({
           </Tab>
         ))}
       </TabList>
-      <div className="mt-6 px-3 py-4 bg-surfaceDefault">
+      <div className="mt-6 md:px-3 md:py-4 md:bg-surfaceDefault">
         {tabValue === 'overview' && (
           <div className="mb-3 flex items-center justify-end gap-4 flex-wrap">
             <Button

examples/district/components/mobile-nav.tsx

@@ -6,7 +6,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
 import { mainConfig } from '@/config/site';
-import { useParams, usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 const districts = [
   {
@@ -37,43 +37,45 @@ export const MobileNav = () => {
   }, [open]);
 
   return (
-    <header>
-      <div className="px-5 py-3 bg-backgroundSolidDark text-textOnBGDefault flex items-center justify-between">
-        <Link href="/" className="flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            fill="none"
-          >
-            <g
-              stroke="#fff"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="1.5"
-              clipPath="url(#a)"
+    <>
+      <header>
+        <div className="px-5 py-3 bg-backgroundSolidDark text-textOnBGDefault flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="none"
             >
-              <path d="M8 4 4 6v5l4 2 4-2V6L8 4ZM12 11l4 2 4-2V6l-4-2-4 2M8 13v5l4 2 4-2v-5" />
-            </g>
-            <defs>
-              <clipPath id="a">
-                <path fill="#fff" d="M0 0h24v24H0z" />
-              </clipPath>
-            </defs>
-          </svg>
-          <Text variant="headingSmSpaced" color="inherit">
-            D4D ASSAM
-          </Text>
-        </Link>
+              <g
+                stroke="#fff"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+                clipPath="url(#a)"
+              >
+                <path d="M8 4 4 6v5l4 2 4-2V6L8 4ZM12 11l4 2 4-2V6l-4-2-4 2M8 13v5l4 2 4-2v-5" />
+              </g>
+              <defs>
+                <clipPath id="a">
+                  <path fill="#fff" d="M0 0h24v24H0z" />
+                </clipPath>
+              </defs>
+            </svg>
+            <Text variant="headingSmSpaced" color="inherit">
+              D4D ASSAM
+            </Text>
+          </Link>
 
-        <IconButton
-          icon={open ? Icons.cross : Icons.menu}
-          onClick={() => setOpen((e) => !e)}
-          className="text-textOnBGDefault"
-        >
-          Menu
-        </IconButton>
-      </div>
+          <IconButton
+            icon={open ? Icons.cross : Icons.menu}
+            onClick={() => setOpen((e) => !e)}
+            color="onBgDefault"
+          >
+            Menu
+          </IconButton>
+        </div>
+      </header>
       {open && (
         <div className="h-screen overflow-y-auto bg-backgroundSolidDark text-textOnBGDefault border-t-1 border-solid border-baseGraySlateSolid11">
           <Link
@@ -108,7 +110,7 @@ export const MobileNav = () => {
           ))}
         </div>
       )}
-    </header>
+    </>
   );
 };
 

examples/district/styles/globals.css

@@ -18,19 +18,19 @@
   --card-border-rgb: 131, 134, 135;
 }
 
-html {
+/* html {
   overflow-y: scroll;
-}
+} */
 
 body {
   background-color: var(--background-solid-subdued);
 }
 
-html,
+/* html,
 body,
 body > .opub-Tooltip {
   height: 100%;
-}
+} */
 
 a {
   color: inherit;

packages/opub-ui/assets/base.css

@@ -3,7 +3,7 @@ body {
   line-height: 150%;
   box-sizing: border-box;
   font-family: var(--primary-font);
-  --outline: 2px solid var(--focused);
+  --outline: 2px solid var(--text-interactive);
   --outline-offset: 2px;
 }
 

packages/opub-ui/src/components/IconButton/IconButton.module.scss

@@ -17,7 +17,7 @@
   }
 
   &:hover {
-    background: var(--surface-selected);
+    // background: var(--surface-selected);
     outline: var(--border-width-1) solid transparent;
   }
 
@@ -29,7 +29,7 @@
   }
 
   &:active {
-    background: var(--surface-selected);
+    // background: var(--surface-selected);
     box-shadow: var(--shadow-button-default);
 
     &::after {
@@ -39,7 +39,7 @@
   }
 
   &.pressed {
-    background: var(--surface-selected);
+    // background: var(--surface-selected);
     box-shadow: var(--shadow-button-pressed);
 
     @include recolor-icon(currentColor);

packages/opub-viz/styles/base.css

@@ -82,7 +82,7 @@ body {
   line-height: 150%;
   box-sizing: border-box;
   font-family: var(--primary-font);
-  --outline: 2px solid var(--focused);
+  --outline: 2px solid var(--text-interactive);
   --outline-offset: 2px;
 }