fix: enable scroll on card page

fix: prevent zooming on ios
fix: display theme background and set dynamic viewport height
2025-07-02 14:37:56 +01:00 · 2025-07-02 14:18:32 +01:00 · 2025-07-02 14:07:09 +01:00 · 2025-07-02 13:56:35 +01:00
4 changed files with 20 additions and 9 deletions
--- a/apps/web/src/components/Dashboard.tsx
+++ b/apps/web/src/components/Dashboard.tsx
@@ -10,6 +10,7 @@ import {
 import { authClient } from "@kan/auth/client";

 import { useClickOutside } from "~/hooks/useClickOutside";
+import { useTheme } from "~/providers/theme";
 import FeedbackButton from "./FeedbackButton";
 import SideNavigation from "./SideNavigation";

@@ -24,6 +25,8 @@ export default function Dashboard({
  rightPanel,
  hasRightPanel = false,
 }: DashboardProps) {
+  const theme = useTheme();
+
  const { data: session, isPending: sessionLoading } = authClient.useSession();
  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
@@ -65,16 +68,20 @@ export default function Dashboard({
    }
  });

+  const isDarkMode = theme.activeTheme === "dark";
+
  return (
    <>
      <style jsx global>{`
        html {
          height: 100vh;
          overflow: hidden;
+          min-width: 320px;
+          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
        }
      `}</style>
-      <div className="h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:flex md:min-w-[800px]">
-        <div className="m-auto flex h-12 min-h-12 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400 md:h-16 md:min-h-16">
+      <div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:min-w-[800px]">
+        <div className="flex h-12 min-h-12 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400 md:h-16 md:min-h-16">
          <div className="my-auto flex w-full items-center justify-between">
            <button
              ref={sideNavButtonRef}
@@ -127,10 +134,10 @@ export default function Dashboard({
          </div>
        </div>

-        <div className="flex h-full w-full">
+        <div className="flex h-full min-h-0 w-full">
          <div
            ref={sideNavRef}
-            className={`fixed left-0 z-50 h-[calc(100vh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:h-[calc(100vh-4rem)] md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
+            className={`fixed left-0 top-12 z-50 h-[calc(100dvh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
          >
            <SideNavigation
              user={{ email: session?.user.email, image: session?.user.image }}
@@ -138,14 +145,14 @@ export default function Dashboard({
            />
          </div>

-          <div className="relative flex w-full overflow-hidden">
-            <div className="w-full overflow-hidden">{children}</div>
+          <div className="relative flex min-h-0 w-full overflow-hidden">
+            <div className="h-full w-full overflow-y-auto">{children}</div>

            {/* Mobile Right Panel */}
            {hasRightPanel && rightPanel && (
              <div
                ref={rightPanelRef}
-                className={`fixed right-0 top-12 z-50 h-[calc(100vh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
+                className={`fixed right-0 top-12 z-50 h-[calc(100dvh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
                  isRightPanelOpen ? "translate-x-0" : "translate-x-full"
                }`}
              >
--- a/apps/web/src/components/PageHead.tsx
+++ b/apps/web/src/components/PageHead.tsx
@@ -4,6 +4,10 @@ export const PageHead = ({ title }: { title: string }) => {
  return (
    <Head>
      <title>{title}</title>
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1"
+      />
    </Head>
  );
 };
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -189,7 +189,7 @@ export default function CardPage() {
      />
      <div className="flex h-full flex-1 flex-row">
        <div className="flex h-full w-full flex-col overflow-hidden">
-          <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-6 md:p-8">
+          <div className="h-full max-h-[calc(100dvh-3rem)] overflow-y-auto p-6 md:max-h-[calc(100dvh-4rem)] md:p-8">
            <div className="mb-8 flex w-full items-center justify-between">
              {!card && isLoading && (
                <div className="flex space-x-2">
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -104,7 +104,7 @@ export default function SettingsPage() {
  return (
    <>
      <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
+        <div className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]">
          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
          <div className="m-auto max-w-[1600px] px-5 py-6 md:px-28 md:py-12">
            <div className="mb-8 flex w-full justify-between">
Author	SHA1	Message	Date
Henry	44566f4838	fix: enable scroll on card page	2025-07-02 14:37:56 +01:00
Henry	30b3332d1f	fix: prevent zooming on ios	2025-07-02 14:18:32 +01:00
Henry	24e418a239	fix: display theme background and set dynamic viewport height	2025-07-02 14:07:09 +01:00
Henry	4045ccbfd8	fix: add min width to dashboard	2025-07-02 13:56:35 +01:00