Better small display support

packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx

@@ -151,10 +151,10 @@ export function NavItem({ item, href, onClick }: { item: Item, href: string, onC
 export function SidebarContent({ projectId, onNavigate }: { projectId: string, onNavigate?: () => void }) {
   return (
     <div className="flex flex-col h-full items-stretch">
-      <div className="h-14 border-b flex items-center px-2">
+      <div className="h-14 border-b flex items-center px-2 shrink-0">
         <ProjectSwitcher currentProjectId={projectId} />
       </div>
-      <div className="flex flex-col gap-1 pt-2">
+      <div className="flex flex-grow flex-col gap-1 pt-2 overflow-y-auto">
         {navigationItems.map((item, index) => {
           if (item.type === 'label') {
             return <Typography key={index} className="pl-2 mt-3" type="label" variant="secondary">
@@ -166,22 +166,22 @@ export function SidebarContent({ projectId, onNavigate }: { projectId: string, o
             </div>;
           }
         })}
-      </div>
-      
-      <div className="flex-grow"/>
 
-      <div className="py-2 px-2 flex">
-        <NavItem
-          onClick={onNavigate}
-          item={{
-            name: "Documentation",
-            type: "item",
-            href: "",
-            icon: Book,
-            regex: /^$/,
-          }}
-          href={"https://docs.stack-auth.com/"}
-        />
+        <div className="flex-grow"/>
+
+        <div className="py-2 px-2 flex">
+          <NavItem
+            onClick={onNavigate}
+            item={{
+              name: "Documentation",
+              type: "item",
+              href: "",
+              icon: Book,
+              regex: /^$/,
+            }}
+            href={"https://docs.stack-auth.com/"}
+          />
+        </div>
       </div>
     </div>
   );
@@ -299,4 +299,4 @@ export default function SidebarLayout(props: { projectId: string, children?: Rea
       </div>
     </div>
   );
-}
+}

packages/stack-server/src/app/globals.css

@@ -84,9 +84,9 @@
 .loader {
   top: 0;
   left: 0;
-  width: 100vw;
+  right: 0;
   height: 3px;
-  position: absolute;
+  position: fixed;
   background: transparent;
   overflow: hidden;
   z-index: 9999;
@@ -119,4 +119,4 @@
     left: 100%;
     transform: translateX(0%);
   }
-}
+}

packages/stack-server/src/components/action-dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useId } from "react";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogBody } from '@/components/ui/dialog';
 import { Button } from "@/components/ui/button";
 import { CircleAlert, Info, LucideIcon } from "lucide-react";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
@@ -71,14 +71,16 @@ export function ActionDialog(props: ActionDialogProps) {
           </DialogDescription>
         </DialogHeader>
 
-        <div>
-          {props.children}
-        </div>
+        <DialogBody>
+          <div>
+            {props.children}
+          </div>
         
-        {props.confirmText && <Alert className="flex gap-4 items-center">
-          <Checkbox id={confirmId} checked={confirmed} onCheckedChange={(v) => setConfirmed(!!v)}/>
-          <Label htmlFor={confirmId}>{props.confirmText}</Label>
-        </Alert>}
+          {props.confirmText && <Alert className="flex gap-4 items-center">
+            <Checkbox id={confirmId} checked={confirmed} onCheckedChange={(v) => setConfirmed(!!v)}/>
+            <Label htmlFor={confirmId}>{props.confirmText}</Label>
+          </Alert>}
+        </DialogBody>
 
 
         {anyButton && <DialogFooter className="gap-2">

packages/stack-server/src/components/data-table/team-permission-table.tsx

@@ -122,7 +122,7 @@ const columns: ColumnDef<PermissionDefinitionJson>[] =  [
   },
   {
     accessorKey: "containPermissionIds",
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Contain Permissions" />,
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Contains Permissions" />,
     cell: ({ row }) => <BadgeCell size={120} badges={row.getValue("containPermissionIds")} />,
   },
   {
@@ -133,4 +133,4 @@ const columns: ColumnDef<PermissionDefinitionJson>[] =  [
 
 export function TeamPermissionTable(props: { permissions: PermissionDefinitionJson[] }) {
   return <DataTable data={props.permissions} columns={columns} toolbarRender={toolbarRender} />;
-}
+}

packages/stack-server/src/components/navbar.tsx

@@ -10,7 +10,7 @@ export function Navbar({ ...props }) {
   const { theme, setTheme } = useTheme();
   return (
     <header
-      className={`sticky top-0 z-30 flex items-center justify-between border-b bg-white dark:bg-black px-4 ${props.className || ""}`}
+      className={`sticky top-0 z-30 flex items-center justify-between border-b bg-white dark:bg-black px-4 shrink-0 ${props.className || ""}`}
       style={{ height: `50px` }}
     >
       <div className="flex items-center justify-center">

packages/stack-server/src/components/ui/command.tsx

@@ -6,7 +6,7 @@ import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 
 import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogBody, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -29,9 +29,11 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
+        <DialogBody>
+          <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+            {children}
+          </Command>
+        </DialogBody>
       </DialogContent>
     </Dialog>
   );

packages/stack-server/src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] max-h-screen z-50 flex flex-col gap-4 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -53,6 +53,13 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+const DialogBody = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("overflow-y-auto flex flex-col w-full gap-4", className)} {...props} />
+);
+
 const DialogHeader = ({
   className,
   ...props
@@ -115,6 +122,7 @@ export {
   DialogTrigger,
   DialogClose,
   DialogContent,
+  DialogBody,
   DialogHeader,
   DialogFooter,
   DialogTitle,