feat: basic mobile support (#64)

* feat: add mobile navigation with responsive layout and theme controls

* feat: prevent workspace owners from removing themselves and update workspace dropdown styling

* feat: add useClickOutside hook and event listener utilities for improved UI interactions

* chore: improve mobile UI styling

* refactor: improve UI layout and buttons in boards/members views
feat: adjust /members layout

* fix: standardize layout containers and improve mobile navigation styling

* feat: update card view layout

* feat: add responsive layout to board view

* feat: readjust boards page layout

* feat: enhance table view on mobile for members page

* feat: extend mobile support with sliding side panels

* fix: prevent two panels from being open at the same time

* feat: close panels when clicking outside

* fix: adjust font-sizing for import source

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/pages/_app.tsx

@@ -2,6 +2,7 @@ import "~/styles/globals.css";
 import "~/utils/i18n";
 
 import type { AppType } from "next/app";
+import { Viewport } from "next";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Script from "next/script";
 import { env } from "next-runtime-env";
@@ -26,6 +27,13 @@ export const metadata = {
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 const MyApp: AppType = ({ Component, pageProps }) => {
   const posthogKey = env("NEXT_PUBLIC_POSTHOG_KEY");
 

apps/web/src/pages/cards/[cardId]/index.tsx

@@ -1,12 +1,12 @@
-import { WorkspaceProvider } from "~/providers/workspace";
 import Dashboard from "~/components/Dashboard";
 import Popup from "~/components/Popup";
-import CardView from "~/views/card";
+import { WorkspaceProvider } from "~/providers/workspace";
+import CardView, { CardRightPanel } from "~/views/card";
 
 export default function CardPage() {
   return (
     <WorkspaceProvider>
-      <Dashboard>
+      <Dashboard hasRightPanel rightPanel={<CardRightPanel />}>
         <CardView />
       </Dashboard>
       <Popup />