studio: polish styles for file viewer

apps/studio/src/client/components/document-viewers/data-grid.tsx

@@ -338,7 +338,7 @@ export function DataGrid({
   return (
     <>
       <ViewerToolbar>
-        <span className="px-1 text-xs whitespace-nowrap text-muted-foreground tabular-nums">
+        <span className="px-1.5 text-xs whitespace-nowrap text-muted-foreground tabular-nums">
           {title && <span className="text-foreground">{title}</span>}
           {title && " · "}
           {filtered

apps/studio/src/client/components/document-viewers/iwork-viewer.tsx

@@ -72,7 +72,10 @@ export function IWorkViewer({
 
   return (
     <>
-      <div className="flex shrink-0 items-start gap-2 border-t border-border/60 bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+      {/* No rule of its own: this sits at the top of the document area, right
+          under the hairline that closes the viewer's chrome, and a border here
+          reads as a second line a pixel below the first. */}
+      <div className="flex shrink-0 items-start gap-2 bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
         <InfoIcon className="mt-px size-4 shrink-0" />
         <span>
           Preview of the first page, saved by {appName(filename)}. The full

apps/studio/src/client/components/document-viewers/viewer-toolbar.tsx

@@ -231,8 +231,11 @@ export function ViewerRailToggle({
 }
 
 /**
- * The row of document controls beneath the file viewer's own header. Sized in
- * the same idiom as that header so the two read as one piece of chrome.
+ * The row of document controls beneath the file viewer's own header. Same
+ * height as that header (`h-10` in both) and no rule between them, so the two
+ * read as one band of chrome. Being the last row of that band, this is the one
+ * that carries the hairline closing it; the header defers to it for every
+ * format the viewer registry marks as having a toolbar.
  *
  * Groups are spaced apart rather than ruled apart: the zoom stepper is a single
  * bounded control and the rest are ghost buttons, so gaps alone carry the
@@ -244,7 +247,7 @@ export function ViewerRailToggle({
  */
 export function ViewerToolbar({ children }: { children: ReactNode }) {
   return (
-    <div className="@container/viewer-toolbar flex h-10 shrink-0 items-center gap-3 border-t border-border/60 px-2">
+    <div className="@container/viewer-toolbar flex h-10 shrink-0 items-center gap-3 px-2 pb-3 viewer-chrome-stroke">
       {children}
     </div>
   );
@@ -287,6 +290,9 @@ export function ViewerZoomControl({
     <ZoomStepperControl
       canZoomIn={zoom < max}
       canZoomOut={zoom > min}
+      // Leading the row, the stepper's own box edge is what has to land on the
+      // filename's column, not a glyph inset like the ghost buttons have.
+      className="first:ml-1.5"
       onZoomIn={() => {
         onZoomChange(steppedZoom({ direction: "in", factor: zoom, max, min }));
       }}

apps/studio/src/client/components/document-viewers/xlsx-viewer.tsx

@@ -130,6 +130,7 @@ export function XlsxViewer({
             allowResizeInReadOnly
             className="absolute inset-0"
             controller={controller}
+            rounded={false}
             showDefaultToolbar={false}
           />
         )}