From b620ac0975f65dc4acc6e1b04edc677cfce9f2de Mon Sep 17 00:00:00 2001
From: Cess White <acessloop@gmail.com>
Date: Thu, 7 May 2026 17:45:25 -0600
Subject: [PATCH 1/3] Updated components to enhance layout with rounded corners
 and padding, minor change

---
 ui/studio/Studio.tsx                  | 40 ++++++++++++++-------------
 ui/studio/grid/DataGridPagination.tsx |  4 +--
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/ui/studio/Studio.tsx b/ui/studio/Studio.tsx
index 6f7e2fe3..236c5c69 100644
--- a/ui/studio/Studio.tsx
+++ b/ui/studio/Studio.tsx
@@ -165,25 +165,27 @@ function StudioContent() {
               )}
             </AnimatePresence>
 
-            <motion.div
-              className="flex h-full min-h-0 min-w-0 flex-1 flex-col self-stretch overflow-hidden rounded-lg bg-secondary p-px"
-              data-testid="studio-main-pane"
-              transition={{ duration: 0.14 }}
-            >
-              {shouldShowStartupIntrospectionRecovery ? (
-                <StartupIntrospectionRecoveryView
-                  errorState={errorState}
-                  isRetrying={isRefetching}
-                  onRetry={() => void refetch()}
-                />
-              ) : shouldShowDatabaseUnavailableView ? (
-                <DatabaseUnavailableView
-                  hasStreamsServer={typeof streamsUrl === "string"}
-                />
-              ) : (
-                <View />
-              )}
-            </motion.div>
+            <div className="p-3 flex h-full min-h-0 min-w-0 flex-1 flex-col self-stretch overflow-hidden rounded-xl text-card-foreground">
+              <motion.div
+                className="flex h-full flex-col self-stretch overflow-hidden border border-table-border rounded-xl"
+                data-testid="studio-main-pane"
+                transition={{ duration: 0.14 }}
+              >
+                {shouldShowStartupIntrospectionRecovery ? (
+                  <StartupIntrospectionRecoveryView
+                    errorState={errorState}
+                    isRetrying={isRefetching}
+                    onRetry={() => void refetch()}
+                  />
+                ) : shouldShowDatabaseUnavailableView ? (
+                  <DatabaseUnavailableView
+                    hasStreamsServer={typeof streamsUrl === "string"}
+                  />
+                ) : (
+                  <View />
+                )}
+              </motion.div>
+            </div>
           </div>
         </div>
       </StudioCommandPaletteProvider>
diff --git a/ui/studio/grid/DataGridPagination.tsx b/ui/studio/grid/DataGridPagination.tsx
index d302b1ba..4b017a6d 100644
--- a/ui/studio/grid/DataGridPagination.tsx
+++ b/ui/studio/grid/DataGridPagination.tsx
@@ -121,8 +121,8 @@ export function DataGridPagination(props: DataGridPaginationProps) {
   }
 
   return (
-    <div className="rounded-b-lg overflow-visible sticky bottom-0 left-0 border-t-0 w-full z-20 p-0">
-      <div className="flex items-center justify-between gap-2 py-3 px-2 border-t border-table-border backdrop-blur-sm bg-background/90">
+    <div className="rounded-b-xl overflow-visible sticky bottom-0 left-0 border-t-0 w-full z-20 p-0">
+      <div className="rounded-b-xl flex items-center justify-between gap-2 py-3 px-2 border-t border-table-border backdrop-blur-sm bg-background/90">
         {variant === "basic" ? (
           <div className="flex items-center gap-2">
             <Button

From 7948c11b958ae2af5914db1b83cac49dd6fed94e Mon Sep 17 00:00:00 2001
From: Cess White <acessloop@gmail.com>
Date: Thu, 7 May 2026 17:48:28 -0600
Subject: [PATCH 2/3] style: apply black background to body in index.css

---
 ui/index.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/index.css b/ui/index.css
index 4c3ec99f..a84da795 100644
--- a/ui/index.css
+++ b/ui/index.css
@@ -213,6 +213,9 @@
   .ps {
     @import "tailwindcss/preflight.css";
   }
+  body {
+    @apply bg-black!;
+  }
 }
 
 [data-radix-popper-content-wrapper] {

From ef22d3a5d94e6fa72bf2dfe39bb7c2dd4ffe7e94 Mon Sep 17 00:00:00 2001
From: Cess White <acessloop@gmail.com>
Date: Thu, 7 May 2026 18:35:51 -0600
Subject: [PATCH 3/3] style: enhance StreamView footer with rounded corners

---
 ui/studio/views/stream/StreamView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/studio/views/stream/StreamView.tsx b/ui/studio/views/stream/StreamView.tsx
index 134d10b4..54e22df3 100644
--- a/ui/studio/views/stream/StreamView.tsx
+++ b/ui/studio/views/stream/StreamView.tsx
@@ -1849,7 +1849,7 @@ function ActiveStreamView(props: {
           </div>
 
           <div
-            className="border-t border-table-border bg-background/90 px-2 py-3 backdrop-blur-sm"
+            className="border-t rounded-b-xl border-table-border bg-background/90 px-2 py-3 backdrop-blur-sm"
             data-testid="stream-footer"
           >
             <div className="flex flex-wrap items-center justify-start gap-2">