Improve ViewDocument styling (#36442)

GitOrigin-RevId: feb632f9ff49767bd376375ddf936d1ab97dbe93

Author: atrakh

npm-packages/dashboard-common/src/features/data/components/DataContent.tsx

@@ -199,7 +199,7 @@ export function DataContent({
         className={cn(
           "flex shrink flex-col gap-2 overflow-hidden py-4",
           "max-w-full",
-          popupEl ? "min-w-[10rem]" : "min-w-[20rem]",
+          popupEl ? "min-w-[16rem]" : "min-w-[20rem]",
         )}
         ref={ref}
         defaultSize={80}
@@ -218,7 +218,7 @@ export function DataContent({
           isLoadingMore={isLoading && !isPaused}
         />
 
-        <div className="flex h-full flex-col rounded">
+        <div className="flex h-full max-h-full flex-col overflow-y-hidden rounded">
           {numRowsInTable !== undefined && numRowsInTable > 0 && (
             <DataFilters
               tableName={tableName}

npm-packages/dashboard-common/src/features/data/components/EmptyData.tsx

@@ -14,6 +14,8 @@ import { useTableMetadata } from "@common/lib/useTableMetadata";
 import { Loading } from "@ui/Loading";
 import { Button } from "@ui/Button";
 import { Sheet } from "@ui/Sheet";
+import { cn } from "@ui/cn";
+import { useSize } from "react-use";
 
 // Example table data for the background
 const EXAMPLE_COLUMNS = ["_id", "name", "email", "_creationTime"];
@@ -49,13 +51,18 @@ export function EmptyDataContent({
     deployment?.deploymentType !== "prod" || hasAdminPermissions;
   const tableMetadata = useTableMetadata();
   const log = useLogDeploymentEvent();
+
+  const sizeMe = <div />;
+  const [sized, { width }] = useSize(sizeMe);
+
   if (!tableMetadata) {
     return <Loading />;
   }
 
   return (
     <div className="relative h-full w-full animate-fadeIn">
       {/* Background table example */}
+      {sized}
       <div
         className="pointer-events-none absolute inset-0"
         style={{
@@ -160,7 +167,10 @@ export function EmptyDataContent({
       <div className="absolute inset-0 flex items-center justify-center">
         <Sheet
           padding={false}
-          className="m-6 h-fit w-fit bg-background-secondary/90 p-2 backdrop-blur-[2px]"
+          className={cn(
+            "h-fit w-fit bg-background-secondary/90 backdrop-blur-[2px]",
+            width > 320 ? "p-2 m-6" : "m-0 p-0",
+          )}
         >
           <EmptySection
             Icon={TableIcon}

npm-packages/dashboard-common/src/features/data/components/Table/EditDocumentField.tsx

@@ -82,7 +82,7 @@ export function EditDocumentField({
           errors.length > 0 ? setEditError(errors[0]) : setEditError(undefined);
         }}
         disableFolding
-        className="border-border-selected pl-2"
+        className="border-border-selected bg-background-secondary px-2"
         validator={validator}
         shouldSurfaceValidatorErrors={shouldSurfaceValidatorErrors}
         mode="editField"

npm-packages/dashboard-common/src/features/data/components/Table/Table.tsx

@@ -343,7 +343,7 @@ export function Table({
             onExpand={() => setCollapsed(false)}
             ref={panelRef}
             className={cn(
-              "relative overflow-x-auto",
+              "max-h-full overflow-x-auto bg-background-primary",
               !collapsed && "min-w-[14rem]",
             )}
           >

npm-packages/dashboard-common/src/features/data/components/Table/ViewDocument.tsx

@@ -67,7 +67,7 @@ export function ViewDocument({
   const shouldSurfaceValidatorErrors = activeSchema?.schemaValidation;
 
   return (
-    <div className="flex h-full w-full min-w-[10rem] flex-col items-start overflow-y-hidden rounded-r border-l bg-background-secondary">
+    <div className="flex h-full w-full min-w-[10rem] flex-col items-start overflow-y-hidden rounded-r border-l bg-background-secondary/70">
       {showEnableProdEditsModalForColumn && (
         <ProductionEditsConfirmationDialog
           onClose={() => {
@@ -80,8 +80,8 @@ export function ViewDocument({
           }}
         />
       )}
-      <div className="flex w-full flex-col gap-2 border-b p-4">
-        <div className="ml-auto flex items-center gap-1 text-xs text-content-tertiary">
+      <div className="flex w-full flex-col gap-2 border-b p-4 px-2">
+        <div className="flex items-center justify-between gap-1 text-xs">
           {rows.length} document{rows.length !== 1 && "s"} selected
           <CopyButton
             text={
@@ -106,7 +106,7 @@ export function ViewDocument({
           className="w-full"
         />
       </div>
-      <div className="mt-2 flex w-full flex-col gap-2 overflow-y-auto overflow-x-hidden px-4 py-2 scrollbar">
+      <div className="mt-2 flex w-full flex-col gap-2 overflow-y-auto overflow-x-hidden p-2 scrollbar">
         {columns
           .filter(
             (c) =>
@@ -121,8 +121,8 @@ export function ViewDocument({
                 key={column}
                 className="flex w-full flex-col items-center gap-1"
               >
-                <div className="flex w-full justify-between text-xs">
-                  <code>{column}</code>
+                <div className="flex w-full justify-between text-xs font-medium">
+                  {column}
                 </div>
                 {editingColumn === column ? (
                   <EditDocumentField
@@ -139,7 +139,7 @@ export function ViewDocument({
                 ) : (
                   <div className="flex w-full gap-1">
                     <Button
-                      className="flex h-[2.25rem] w-full cursor-text items-center justify-between truncate rounded border px-2 disabled:cursor-not-allowed"
+                      className="flex h-[2.25rem] w-full cursor-text items-center justify-between truncate rounded-md border bg-background-secondary px-2 disabled:cursor-not-allowed"
                       variant="unstyled"
                       onClick={() => {
                         if (!areEditsAuthorized) {