style

Author: ademilter

packages/react-databrowser/src/components/databrowser/components/add-key-modal.tsx

@@ -101,9 +101,7 @@ export function AddKeyModal() {
               }}
               control={control}
               name="key"
-              render={({ field }) => (
-                <Input placeholder="mykey" {...field} className="h-8 flex-grow" />
-              )}
+              render={({ field }) => <Input placeholder="mykey" {...field} className="h-8 grow" />}
             />
           </div>
 

packages/react-databrowser/src/components/databrowser/components/display/display-header.tsx

@@ -42,7 +42,7 @@ export const DisplayHeader = ({
       <div className="flex min-h-10 items-center justify-between gap-4">
         <h2 className="grow truncate">
           {dataKey.trim() === "" ? (
-            <span className="ml-1 text-sm text-zinc-500">(Empty Key)</span>
+            <span className="ml-1 text-zinc-500">(Empty Key)</span>
           ) : (
             <span className="font-semibold">{dataKey}</span>
           )}

packages/react-databrowser/src/components/databrowser/components/display/display-list-edit.tsx

@@ -65,7 +65,7 @@ const ListEditForm = ({
   return (
     <FormProvider {...form}>
       <form onSubmit={onSubmit} className="flex flex-col gap-2">
-        <div className="flex flex-grow flex-col gap-2">
+        <div className="flex grow flex-col gap-2">
           {type !== "list" && <FormItem name="key" label={keyLabel} />}
           {type === "zset" ? (
             <NumberFormItem name="value" label={valueLabel} />

packages/react-databrowser/src/components/databrowser/components/display/display-list.tsx

@@ -30,21 +30,23 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
 
       {selectedListItem && <ListEditDisplay dataKey={dataKey} type={type} />}
 
-      <div className={cn("min-h-0 flex-grow", selectedListItem && "hidden")}>
+      <div className={cn("min-h-0 grow", selectedListItem && "hidden")}>
         <InfiniteScroll query={query}>
-          <table className="w-full flex-grow text-sm text-zinc-700">
-            {/*{type !== "set" && (*/}
-            {/*  <thead>*/}
-            {/*    <tr>*/}
-            {/*      <th className="px-3 py-2 text-left font-medium opacity-40">{keyHeader}</th>*/}
-            {/*      <th className="px-3 py-2 text-left font-medium opacity-40">{valueHeader}</th>*/}
-            {/*    </tr>*/}
-            {/*  </thead>*/}
-            {/*)}*/}
-            <tbody>
-              <ListItems query={query} />
-            </tbody>
-          </table>
+          <div className="pr-3">
+            <table className="w-full ">
+              {/*{type !== "set" && (*/}
+              {/*  <thead>*/}
+              {/*    <tr>*/}
+              {/*      <th className="px-3 py-2 text-left font-medium opacity-40">{keyHeader}</th>*/}
+              {/*      <th className="px-3 py-2 text-left font-medium opacity-40">{valueHeader}</th>*/}
+              {/*    </tr>*/}
+              {/*  </thead>*/}
+              {/*)}*/}
+              <tbody>
+                <ListItems query={query} />
+              </tbody>
+            </table>
+          </div>
         </InfiniteScroll>
       </div>
     </div>

packages/react-databrowser/src/components/databrowser/components/display/display-simple.tsx

@@ -62,7 +62,7 @@ const EditorDisplayForm = ({
 
   return (
     <>
-      <div className="flex-grow rounded-md border border-zinc-300 bg-white p-1">{editor}</div>
+      <div className="grow rounded-md border border-zinc-300 bg-white p-1">{editor}</div>
       <div className="flex flex-shrink-0 justify-between px-3 pb-2 pt-1">
         {type === "json" ? <div /> : selector}
 

packages/react-databrowser/src/components/databrowser/components/display/ttl-popover.tsx

@@ -89,7 +89,7 @@ export function TTLPopover({
                 control={control}
                 name="value"
                 render={({ field }) => (
-                  <Input min="-1" {...field} className="h-8 flex-grow rounded-r-none" />
+                  <Input min="-1" {...field} className="h-8 grow rounded-r-none" />
                 )}
               />
               <Controller

packages/react-databrowser/src/components/databrowser/components/sidebar/db-size.tsx

@@ -15,10 +15,10 @@ export const DisplayDbSize = () => {
 
   if (keyCount === undefined) {
     return (
-      <div className="flex items-center justify-center gap-1 text-sm font-normal text-[#00000066]">
+      <div className="flex items-center justify-center gap-1">
         <Skeleton className="h-5 w-10 rounded" />
       </div>
     )
   }
-  return <div className="text-sm font-normal text-[#00000066]">{formatNumber(keyCount)} Keys</div>
+  return <div className="">{formatNumber(keyCount)} Keys</div>
 }

packages/react-databrowser/src/components/databrowser/components/sidebar/empty.tsx

@@ -3,9 +3,7 @@ export const Empty = () => {
     <div className="flex h-full w-full items-center justify-center rounded-md border border-dashed px-4 py-6 text-center">
       <div className="space-y-5">
         <p className="text-md font-medium">Data on a break</p>
-        <p className="text-balance text-center text-sm">
-          "Quick, lure it back with some CLI magic!"
-        </p>
+        <p className="text-balance text-center">"Quick, lure it back with some CLI magic!"</p>
       </div>
     </div>
   )

packages/react-databrowser/src/components/databrowser/index.tsx

@@ -22,7 +22,11 @@ export const Databrowser = ({ token, url }: DatabrowserProps) => {
       <TooltipProvider>
         <DatabrowserProvider databrowser={credentials}>
           <KeysProvider>
-            <PanelGroup autoSaveId="persistence" direction="horizontal" className="gap-0.5">
+            <PanelGroup
+              autoSaveId="persistence"
+              direction="horizontal"
+              className="h-full w-full gap-0.5 text-sm antialiased"
+            >
               <Panel defaultSize={30} minSize={30}>
                 <Sidebar />
               </Panel>

packages/react-databrowser/src/playground.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client"
 import { Databrowser } from "@/components/databrowser"
 
 ReactDOM.createRoot(document.querySelector("#root")!).render(
-  <main className="mx-auto flex h-[600px] max-h-full max-w-screen-lg items-center justify-center p-10 antialiased">
+  <main className="mx-auto flex h-[600px] max-h-full max-w-screen-lg items-center justify-center p-10">
     <Databrowser
       token={process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN}
       url={process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL}