Merge pull request #139 from supabase-community/feat/mobile

Mobile support

Author: gregnr

apps/postgres-new/app/(main)/db/[id]/page.tsx

@@ -35,7 +35,7 @@ export default function Page({ params }: { params: { id: string } }) {
     return (
       <div className="relative h-full w-full">
         <NewDatabasePage />
-        <div className="absolute inset-0 bg-background/70 backdrop-blur-sm flex items-center justify-center">
+        <div className="absolute inset-0 bg-background/70 backdrop-blur-sm flex items-center justify-center m-4">
           <p>
             This database is already open in another tab or window.
             <br />

apps/postgres-new/components/chat-message.tsx

@@ -69,7 +69,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
 
       return (
         <m.div
-          className="ml-4 self-stretch flex flex-col items-stretch gap-6"
+          className="lg:ml-4 self-stretch flex flex-col items-stretch gap-6"
           variants={{
             hidden: {
               opacity: 0,

apps/postgres-new/components/chat.tsx

@@ -179,7 +179,7 @@ export default function Chat() {
         layoutId={nextMessageId}
         className="px-5 py-2.5 text-foreground rounded-full bg-border flex gap-2 items-center shadow-xl z-50"
       >
-        <Paperclip size={14} /> Add file to chat
+        <Paperclip size={18} /> Add file to chat
       </m.div>
     ),
   })
@@ -253,7 +253,7 @@ export default function Chat() {
       {dropZoneCursor}
       <div className="flex-1 relative h-full min-h-0">
         {isLoadingMessages || isLoadingSchema ? (
-          <div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10">
+          <div className="h-full w-full max-w-4xl flex flex-col gap-10 p-5 lg:p-10">
             <Skeleton className="self-end h-10 w-1/3 rounded-3xl" />
             <Skeleton className="self-start h-28 w-2/3 rounded-3xl" />
             <Skeleton className="self-end h-10 w-2/3 rounded-3xl" />
@@ -273,7 +273,7 @@ export default function Chat() {
             <LiveShareOverlay databaseId={databaseId} />
             <m.div
               key={databaseId}
-              className="flex flex-col gap-4 w-full max-w-4xl p-10"
+              className="flex flex-col gap-4 w-full max-w-4xl px-2 py-5 lg:p-10"
               variants={{
                 show: {
                   transition: {
@@ -496,7 +496,7 @@ export default function Chat() {
             }}
             disabled={!isChatEnabled}
           >
-            <Paperclip size={16} strokeWidth={1.3} />
+            <Paperclip size={18} strokeWidth={1.3} />
           </Button>
           <textarea
             ref={inputRef}

apps/postgres-new/components/ide.tsx

@@ -24,8 +24,7 @@ export type IDEProps = PropsWithChildren<{
 }>
 
 export default function IDE({ children, className }: IDEProps) {
-  const { databaseId } = useWorkspace()
-  const [tab, setTab] = useState<TabValue>('diagram')
+  const { databaseId, tab, setTab } = useWorkspace()
 
   const isSmallBreakpoint = useBreakpoint('lg')
   const { data: messages } = useMessagesQuery(databaseId)
@@ -36,7 +35,7 @@ export default function IDE({ children, className }: IDEProps) {
     } else {
       setTab('diagram')
     }
-  }, [isSmallBreakpoint])
+  }, [isSmallBreakpoint, setTab])
 
   const { value: migrationStatements } = useAsyncMemo(async () => {
     const sqlExecutions =
@@ -106,35 +105,32 @@ export default function IDE({ children, className }: IDEProps) {
               value="chat"
               className={cn(
                 buttonVariants({ variant: tab === 'chat' ? 'default' : 'ghost' }),
-                tab === 'chat' && '!shadow-sm',
                 'gap-2'
               )}
             >
-              <MessageSquareMore size={14} />
-              <span className="hidden sm:inline">Chat</span>
+              <MessageSquareMore className="hidden sm:block" size={18} />
+              <span>Chat</span>
             </TabsTrigger>
           )}
           <TabsTrigger
             value="diagram"
             className={cn(
               buttonVariants({ variant: tab === 'diagram' ? 'default' : 'ghost' }),
-              tab === 'diagram' && '!shadow-sm',
               'gap-2'
             )}
           >
-            <Workflow size={14} />
-            <span className="hidden sm:inline">Diagram</span>
+            <Workflow className="hidden sm:block" size={18} />
+            <span>Diagram</span>
           </TabsTrigger>
           <TabsTrigger
             value="migrations"
             className={cn(
               buttonVariants({ variant: tab === 'migrations' ? 'default' : 'ghost' }),
-              tab === 'migrations' && '!shadow-sm',
               'gap-2'
             )}
           >
-            <FileCode size={14} />
-            <span className="hidden sm:inline">Migrations</span>
+            <FileCode className="hidden sm:block" size={18} />
+            <span>Migrations</span>
           </TabsTrigger>
           {/* Temporarily hide seeds until we get pg_dump working */}
           {/* {false && (
@@ -166,7 +162,7 @@ export default function IDE({ children, className }: IDEProps) {
         <TabsContent value="migrations" className="h-full">
           <div className="h-full flex flex-col gap-3">
             <Editor
-              className=" py-4 rounded-md bg-[#1e1e1e]"
+              className="py-4 rounded-md bg-[#1e1e1e]"
               language="pgsql"
               value={migrationsSql}
               theme="vs-dark"
@@ -176,6 +172,7 @@ export default function IDE({ children, className }: IDEProps) {
                   enabled: false,
                 },
                 fontSize: 13,
+                wordWrap: 'on',
                 readOnly: true,
               }}
               onMount={async (editor, monaco) => {

apps/postgres-new/components/layout.tsx

@@ -35,11 +35,12 @@ export default function Layout({ children }: LayoutProps) {
     <LazyMotion features={loadFramerFeatures}>
       <TooltipProvider delayDuration={0}>
         <div className="w-full h-full flex flex-col overflow-hidden">
-          {!isLegacyDomain && <LiveShareBanner />}
-          {(isLegacyDomain || isLegacyDomainRedirect) && <RenameBanner />}
+          <div className="hidden lg:flex flex-col">
+            {!isLegacyDomain && <LiveShareBanner />}
+            {(isLegacyDomain || isLegacyDomainRedirect) && <RenameBanner />}
+          </div>
           <main className="flex-1 flex flex-col lg:flex-row min-h-0">
-            {/* TODO: make sidebar available on mobile */}
-            {!isSmallBreakpoint && <Sidebar />}
+            <Sidebar />
             <m.div layout="position" className="w-full h-full min-w-0 min-h-0">
               {children}
             </m.div>

apps/postgres-new/components/schema/legend.tsx

@@ -2,7 +2,7 @@ import { DiamondIcon, Fingerprint, Hash, Key } from 'lucide-react'
 
 const SchemaGraphLegend = () => {
   return (
-    <div className="border-t flex justify-center px-3 h-10 shadow-md bg-muted/50 text-xs md:text-[0.625rem] text-muted-foreground">
+    <div className="border-t flex justify-center p-2 shadow-md bg-muted/50 text-[0.625rem] text-muted-foreground">
       <ul className="flex flex-wrap items-center justify-center gap-4">
         <li className="flex items-center font-mono gap-1">
           <Key size={15} strokeWidth={1.5} className="flex-shrink-0 text-light" />