feat: Adjust responsive padding (#205)

.changeset/short-rats-beam.md

@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Adjust responsive padding and margins

src/components/AppContent/AppContent.tsx

@@ -0,0 +1,7 @@
+type AppContentProps = {
+  children: React.ReactNode;
+};
+
+export const AppContent = ({ children }: AppContentProps) => {
+  return <main className="flex-1 w-full app-padding">{children}</main>;
+};

src/components/AppContent/index.ts

@@ -0,0 +1 @@
+export * from "./AppContent";

src/components/AppSidebar/AppSidebar.tsx

@@ -24,10 +24,10 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
   };
 
   return (
-    <div className="w-72 flex flex-col shrink-0 sticky top-0 h-screen -ml-4 overflow-y-auto border-r border-gray-dim">
-      <div className="flex gap-2 items-center h-16 shrink-0 px-4 sticky top-0 bg-gray-app z-20">
+    <div className="w-72 lg:w-80 xl:w-[22rem] flex flex-col shrink-0 sticky top-0 h-screen overflow-y-auto border-r border-gray-dim">
+      <div className="app-padding h-header flex gap-2 items-center shrink-0 sticky top-0 bg-gray-app z-20">
         <Link href={{ to: "/" }} className="p-1 -m-1">
-          <Logo className="h-[1.25rem]" />
+          <Logo className="h-5 lg:h-[1.35rem]" />
         </Link>
         <Badge className="-mb-1" variant="waiting">
           Beta
@@ -47,8 +47,8 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
           </TooltipTrigger>
         </div>
       </div>
-      <div className="px-4 flex-1">{children}</div>
-      <div className="px-4 h-16 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
+      <div className="app-padding flex-1">{children}</div>
+      <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
         <MenuTrigger>
           <Button aria-label="User settings" variant="ghost" icon={CircleUser}>
             {user?.name}
@@ -80,7 +80,7 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
           <TooltipTrigger>
             <Link
               aria-label="Settings"
-              href={{ to: "/settings/overview" }}
+              href={{ to: "/settings/account" }}
               button={{ variant: "icon" }}
             >
               <Cog size={20} />

src/components/Badge/Badge.tsx

@@ -9,7 +9,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const badge = tv({
-  base: "px-1 font-medium text-center inline-flex justify-center gap-1 items-center shrink-0 bg-graya-3 dark:bg-graydarka-3 text-gray-dim",
+  base: "px-1 font-medium tabular-nums text-center inline-flex justify-center gap-1 items-center shrink-0 bg-graya-3 dark:bg-graydarka-3 text-gray-dim",
   variants: {
     size: {
       xs: "text-[10px] rounded h-4 px-1 min-w-4 leading-none",

src/components/Container/Container.tsx

@@ -6,7 +6,7 @@ export interface ContainerProps {
 }
 
 const containerStyles = tv({
-  base: "max-w-full w-[1200px] px-4 lg:px-6 xl:px-8 mx-auto",
+  base: "max-w-full w-[1200px] mx-auto",
 });
 
 export function Container({ className, children }: ContainerProps) {

src/components/Nav/Nav.tsx

@@ -15,10 +15,10 @@ interface NavItemProps {
 
 const navItemStyles = tv({
   extend: focusRing,
-  base: "rounded-md no-underline flex items-center text-sm gap-1.5 hover:bg-gray-3 dark:hover:bg-graydark-3 h-8 px-2 -mx-2 aria-current:font-semibold aria-current:text-gray-normal",
+  base: "rounded-md no-underline flex items-center text-sm lg:text-base gap-1.5 hover:bg-gray-3/50 dark:hover:bg-graydark-3/50 h-8 lg:h-9 px-2 -mx-2 aria-current:font-semibold aria-current:text-gray-normal",
   variants: {
     isActive: {
-      true: "bg-gray-3 dark:bg-graydark-3",
+      true: "bg-gray-3 hover:bg-gray-3 dark:bg-graydark-3 dark:hover:bg-graydark-3",
     },
   },
 });
@@ -70,9 +70,13 @@ interface NavGroupProps {
 export const NavGroup = ({ label, children, count }: NavGroupProps) => {
   return (
     <div className="flex flex-col gap-0.5 [&:not(:first-child)]:mt-4">
-      <Header className="text-sm h-8 font-semibold text-gray-dim border-b border-gray-4 dark:border-graydark-4 flex justify-start items-center gap-1.5">
+      <Header className="text-sm h-8 font-medium text-gray-dim border-b border-gray-4 dark:border-graydark-4 flex justify-start items-center gap-1.5">
         {label}
-        {count && <Badge size="xs">{count}</Badge>}
+        {count && (
+          <Badge size="xs" className="rounded-full">
+            {count}
+          </Badge>
+        )}
       </Header>
       {children}
     </div>

src/components/PageHeader/PageHeader.tsx

@@ -19,14 +19,16 @@ export const PageHeader = ({
   return (
     <header
       className={twMerge(
-        "h-16 flex bg-gray-app shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
+        "h-header flex bg-gray-app shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
         className,
       )}
     >
       <div className="flex flex-col gap-1">
         <div className="flex gap-2 items-center">
           {Icon && <Icon className="text-gray-dim" />}
-          <h1 className="text-xl font-medium">{title}</h1>
+          <h1 className="text-lg lg:text-2xl font-medium whitespace-nowrap">
+            {title}
+          </h1>
           {badge}
         </div>
       </div>

src/components/ProgressBar/ProgressBar.tsx

@@ -2,14 +2,20 @@ import {
   ProgressBar as AriaProgressBar,
   type ProgressBarProps as AriaProgressBarProps,
 } from "react-aria-components";
+import { twMerge } from "tailwind-merge";
 import { Label } from "../Field";
 import { composeTailwindRenderProps } from "../utils";
 
 export interface ProgressBarProps extends AriaProgressBarProps {
-  label?: string;
+  label: string;
+  labelHidden?: boolean;
 }
 
-export function ProgressBar({ label, ...props }: ProgressBarProps) {
+export function ProgressBar({
+  label,
+  labelHidden = false,
+  ...props
+}: ProgressBarProps) {
   return (
     <AriaProgressBar
       {...props}
@@ -20,9 +26,13 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
     >
       {({ percentage, valueText, isIndeterminate }) => (
         <>
-          <div className="flex justify-between gap-2 -mt-0.5">
-            <Label className="text-gray-normal">{label}</Label>
-            <span className="text-sm text-gray-dim tabular-nums">
+          <div className="flex items-baseline justify-between gap-2 -mt-0.5">
+            <Label
+              className={twMerge("text-gray-dim", labelHidden && "sr-only")}
+            >
+              {label}
+            </Label>
+            <span className="text-xs text-gray-dim tabular-nums">
               {valueText}
             </span>
           </div>

src/components/StatusSelect/StatusSelect.tsx

@@ -9,6 +9,7 @@ import {
   Button,
   Menu,
   MenuItem,
+  MenuSection,
   MenuTrigger,
   Tooltip,
   TooltipTrigger,
@@ -23,7 +24,7 @@ const badgeStyles = tv({
   base: "flex items-center transition-colors rounded-full",
   variants: {
     condensed: {
-      true: "w-5 h-5 p-0",
+      true: "size-5 p-0 lg:size-6",
       false: "pr-2",
     },
   },
@@ -84,19 +85,21 @@ export function StatusSelect({ status, isCore, onChange }: StatusSelectProps) {
         disallowEmptySelection
         onSelectionChange={handleSelectionChange}
       >
-        {Object.entries(STATUS).map(([status, details]) => {
-          if (!isCore && details.isCoreOnly) return null;
-          return (
-            <MenuItem
-              key={status}
-              id={status}
-              aria-label={details.label}
-              className="h-9"
-            >
-              <StatusBadge status={status as Status} size="lg" />
-            </MenuItem>
-          );
-        })}
+        <MenuSection title="Status">
+          {Object.entries(STATUS).map(([status, details]) => {
+            if (!isCore && details.isCoreOnly) return null;
+            return (
+              <MenuItem
+                key={status}
+                id={status}
+                aria-label={details.label}
+                className="h-9"
+              >
+                <StatusBadge status={status as Status} size="lg" />
+              </MenuItem>
+            );
+          })}
+        </MenuSection>
       </Menu>
     </MenuTrigger>
   );

src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./AlertDialog";
 export * from "./AnimateChangeInHeight";
+export * from "./AppContent";
 export * from "./AppSidebar";
 export * from "./Badge";
 export * from "./Banner";

src/routeTree.gen.ts

@@ -21,8 +21,8 @@ import { Route as AuthenticatedSettingsIndexImport } from './routes/_authenticat
 import { Route as AuthenticatedBrowseIndexImport } from './routes/_authenticated/browse/index'
 import { Route as AuthenticatedAdminIndexImport } from './routes/_authenticated/admin/index'
 import { Route as AuthenticatedHomeIndexImport } from './routes/_authenticated/_home/index'
-import { Route as AuthenticatedSettingsOverviewImport } from './routes/_authenticated/settings/overview'
 import { Route as AuthenticatedSettingsDataImport } from './routes/_authenticated/settings/data'
+import { Route as AuthenticatedSettingsAccountImport } from './routes/_authenticated/settings/account'
 import { Route as AuthenticatedAdminQuestsIndexImport } from './routes/_authenticated/admin/quests/index'
 import { Route as AuthenticatedAdminFormsIndexImport } from './routes/_authenticated/admin/forms/index'
 import { Route as AuthenticatedAdminFieldsIndexImport } from './routes/_authenticated/admin/fields/index'
@@ -94,19 +94,19 @@ const AuthenticatedHomeIndexRoute = AuthenticatedHomeIndexImport.update({
   getParentRoute: () => AuthenticatedHomeRoute,
 } as any)
 
-const AuthenticatedSettingsOverviewRoute =
-  AuthenticatedSettingsOverviewImport.update({
-    id: '/overview',
-    path: '/overview',
-    getParentRoute: () => AuthenticatedSettingsRouteRoute,
-  } as any)
-
 const AuthenticatedSettingsDataRoute = AuthenticatedSettingsDataImport.update({
   id: '/data',
   path: '/data',
   getParentRoute: () => AuthenticatedSettingsRouteRoute,
 } as any)
 
+const AuthenticatedSettingsAccountRoute =
+  AuthenticatedSettingsAccountImport.update({
+    id: '/account',
+    path: '/account',
+    getParentRoute: () => AuthenticatedSettingsRouteRoute,
+  } as any)
+
 const AuthenticatedAdminQuestsIndexRoute =
   AuthenticatedAdminQuestsIndexImport.update({
     id: '/quests/',
@@ -202,20 +202,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof UnauthenticatedSigninImport
       parentRoute: typeof UnauthenticatedImport
     }
+    '/_authenticated/settings/account': {
+      id: '/_authenticated/settings/account'
+      path: '/account'
+      fullPath: '/settings/account'
+      preLoaderRoute: typeof AuthenticatedSettingsAccountImport
+      parentRoute: typeof AuthenticatedSettingsRouteImport
+    }
     '/_authenticated/settings/data': {
       id: '/_authenticated/settings/data'
       path: '/data'
       fullPath: '/settings/data'
       preLoaderRoute: typeof AuthenticatedSettingsDataImport
       parentRoute: typeof AuthenticatedSettingsRouteImport
     }
-    '/_authenticated/settings/overview': {
-      id: '/_authenticated/settings/overview'
-      path: '/overview'
-      fullPath: '/settings/overview'
-      preLoaderRoute: typeof AuthenticatedSettingsOverviewImport
-      parentRoute: typeof AuthenticatedSettingsRouteImport
-    }
     '/_authenticated/_home/': {
       id: '/_authenticated/_home/'
       path: '/'
@@ -323,15 +323,15 @@ const AuthenticatedAdminRouteRouteWithChildren =
   )
 
 interface AuthenticatedSettingsRouteRouteChildren {
+  AuthenticatedSettingsAccountRoute: typeof AuthenticatedSettingsAccountRoute
   AuthenticatedSettingsDataRoute: typeof AuthenticatedSettingsDataRoute
-  AuthenticatedSettingsOverviewRoute: typeof AuthenticatedSettingsOverviewRoute
   AuthenticatedSettingsIndexRoute: typeof AuthenticatedSettingsIndexRoute
 }
 
 const AuthenticatedSettingsRouteRouteChildren: AuthenticatedSettingsRouteRouteChildren =
   {
+    AuthenticatedSettingsAccountRoute: AuthenticatedSettingsAccountRoute,
     AuthenticatedSettingsDataRoute: AuthenticatedSettingsDataRoute,
-    AuthenticatedSettingsOverviewRoute: AuthenticatedSettingsOverviewRoute,
     AuthenticatedSettingsIndexRoute: AuthenticatedSettingsIndexRoute,
   }
 
@@ -390,8 +390,8 @@ export interface FileRoutesByFullPath {
   '/admin': typeof AuthenticatedAdminRouteRouteWithChildren
   '/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
   '/signin': typeof UnauthenticatedSigninRoute
+  '/settings/account': typeof AuthenticatedSettingsAccountRoute
   '/settings/data': typeof AuthenticatedSettingsDataRoute
-  '/settings/overview': typeof AuthenticatedSettingsOverviewRoute
   '/': typeof AuthenticatedHomeIndexRoute
   '/admin/': typeof AuthenticatedAdminIndexRoute
   '/browse': typeof AuthenticatedBrowseIndexRoute
@@ -408,8 +408,8 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '': typeof UnauthenticatedRouteWithChildren
   '/signin': typeof UnauthenticatedSigninRoute
+  '/settings/account': typeof AuthenticatedSettingsAccountRoute
   '/settings/data': typeof AuthenticatedSettingsDataRoute
-  '/settings/overview': typeof AuthenticatedSettingsOverviewRoute
   '/': typeof AuthenticatedHomeIndexRoute
   '/admin': typeof AuthenticatedAdminIndexRoute
   '/browse': typeof AuthenticatedBrowseIndexRoute
@@ -431,8 +431,8 @@ export interface FileRoutesById {
   '/_authenticated/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
   '/_authenticated/_home': typeof AuthenticatedHomeRouteWithChildren
   '/_unauthenticated/signin': typeof UnauthenticatedSigninRoute
+  '/_authenticated/settings/account': typeof AuthenticatedSettingsAccountRoute
   '/_authenticated/settings/data': typeof AuthenticatedSettingsDataRoute
-  '/_authenticated/settings/overview': typeof AuthenticatedSettingsOverviewRoute
   '/_authenticated/_home/': typeof AuthenticatedHomeIndexRoute
   '/_authenticated/admin/': typeof AuthenticatedAdminIndexRoute
   '/_authenticated/browse/': typeof AuthenticatedBrowseIndexRoute
@@ -453,8 +453,8 @@ export interface FileRouteTypes {
     | '/admin'
     | '/settings'
     | '/signin'
+    | '/settings/account'
     | '/settings/data'
-    | '/settings/overview'
     | '/'
     | '/admin/'
     | '/browse'
@@ -470,8 +470,8 @@ export interface FileRouteTypes {
   to:
     | ''
     | '/signin'
+    | '/settings/account'
     | '/settings/data'
-    | '/settings/overview'
     | '/'
     | '/admin'
     | '/browse'
@@ -491,8 +491,8 @@ export interface FileRouteTypes {
     | '/_authenticated/settings'
     | '/_authenticated/_home'
     | '/_unauthenticated/signin'
+    | '/_authenticated/settings/account'
     | '/_authenticated/settings/data'
-    | '/_authenticated/settings/overview'
     | '/_authenticated/_home/'
     | '/_authenticated/admin/'
     | '/_authenticated/browse/'
@@ -562,8 +562,8 @@ export const routeTree = rootRoute
       "filePath": "_authenticated/settings/route.tsx",
       "parent": "/_authenticated",
       "children": [
+        "/_authenticated/settings/account",
         "/_authenticated/settings/data",
-        "/_authenticated/settings/overview",
         "/_authenticated/settings/"
       ]
     },
@@ -580,12 +580,12 @@ export const routeTree = rootRoute
       "filePath": "_unauthenticated/signin.tsx",
       "parent": "/_unauthenticated"
     },
-    "/_authenticated/settings/data": {
-      "filePath": "_authenticated/settings/data.tsx",
+    "/_authenticated/settings/account": {
+      "filePath": "_authenticated/settings/account.tsx",
       "parent": "/_authenticated/settings"
     },
-    "/_authenticated/settings/overview": {
-      "filePath": "_authenticated/settings/overview.tsx",
+    "/_authenticated/settings/data": {
+      "filePath": "_authenticated/settings/data.tsx",
       "parent": "/_authenticated/settings"
     },
     "/_authenticated/_home/": {