Fix some stlying issues (#141)

Signed-off-by: Nik Nasr <[email protected]>
restatedev · Jan 15, 2025 · b149b4d · b149b4d
1 parent 15076e8
commit b149b4d
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 33 deletions.
diff --git a/libs/features/invocations-route/src/lib/Filters.tsx b/libs/features/invocations-route/src/lib/Filters.tsx
@@ -43,16 +43,19 @@ export function ClauseChip({
         autoFocus={isNew}
         data-filter-id={item.id}
         variant="secondary"
-        className="inline-flex gap-[0.7ch] items-center py-1 rounded-lg bg-white/[0.25] hover:bg-white/30 pressed:bg-white/30 text-zinc-50 text-xs px-1.5"
+        className="min-w-0 flex gap-[0.7ch] items-center py-1 rounded-lg bg-white/[0.25] hover:bg-white/30 pressed:bg-white/30 text-zinc-50 text-xs px-1.5"
       >
-        <span className="">{item.label}</span>
+        <span className="whitespace-nowrap shrink-0">{item.label}</span>
         {item.operationLabel?.split(' ').map((segment) => (
           <span className="font-mono" key={segment}>
             {segment}
           </span>
         ))}
-        <span className="font-semibold">{item.valueLabel}</span>
-        <Icon name={IconName.ChevronsUpDown} className="w-3.5 h-3.5 ml-2" />
+        <span className="font-semibold truncate">{item.valueLabel}</span>
+        <Icon
+          name={IconName.ChevronsUpDown}
+          className="w-3.5 h-3.5 ml-2 shrink-0"
+        />
       </Button>
     </EditQueryTrigger>
   );

diff --git a/libs/features/invocations-route/src/lib/invocations.route.tsx b/libs/features/invocations-route/src/lib/invocations.route.tsx
@@ -466,14 +466,14 @@ function Component() {
               MenuTrigger={FiltersTrigger}
               placeholder="Filter invocations…"
               title="Filters"
-              className="rounded-xl [&_input::-webkit-search-cancel-button]:invert has-[input[data-focused=true]]:border-blue-500 has-[input[data-focused=true]]:ring-blue-500 [&_input]:placeholder-zinc-400 border-transparent pr-20  [&_input+*]:right-24 [&_input]:min-w-[10ch]"
+              className="rounded-xl [&_input::-webkit-search-cancel-button]:invert has-[input[data-focused=true]]:border-blue-500 has-[input[data-focused=true]]:ring-blue-500 [&_input]:placeholder-zinc-400 border-transparent pr-24 w-full  [&_input+*]:right-24 [&_input]:min-w-[10ch]"
             >
               {ClauseChip}
             </AddQueryTrigger>
           </QueryBuilder>
           <SubmitButton
             isPending={isFetching}
-            className="absolute right-1 top-1 bottom-1 rounded-lg py-0 self-end h-7"
+            className="absolute right-1 top-1 bottom-1 rounded-lg py-0"
           >
             Query
           </SubmitButton>

diff --git a/libs/features/overview-route/src/lib/Details/Deployment.tsx b/libs/features/overview-route/src/lib/Details/Deployment.tsx
@@ -219,18 +219,20 @@ function DeploymentContent({ deployment }: { deployment: string }) {
           </>
         )}
       </Section>
-      <Section className="mt-4">
-        <SectionTitle>Id</SectionTitle>
-        <SectionContent className="font-mono py-1 flex items-center pr-0.5 text-zinc-600 text-code">
-          <div>{data?.id}</div>
-          {data?.id && (
-            <Copy
-              copyText={data?.id}
-              className=" [&_svg]:w-3 [&_svg]:h-3 shrink-0 text-2xs p-1"
-            />
-          )}
-        </SectionContent>
-      </Section>
+      {data && (
+        <Section className="mt-4">
+          <SectionTitle>Id</SectionTitle>
+          <SectionContent className="font-mono py-1 flex items-center pr-0.5 text-zinc-600 text-code">
+            <div>{data?.id}</div>
+            {data?.id && (
+              <Copy
+                copyText={data?.id}
+                className=" [&_svg]:w-3 [&_svg]:h-3 shrink-0 text-2xs p-1"
+              />
+            )}
+          </SectionContent>
+        </Section>
+      )}
     </>
   );
 }

diff --git a/libs/features/overview-route/src/lib/Details/Service.tsx b/libs/features/overview-route/src/lib/Details/Service.tsx
@@ -182,17 +182,21 @@ function ServiceForm({
             </>
           ) : (
             <>
-              <TruncateWithTooltip>{data?.name}</TruncateWithTooltip>
-              <div className="flex items-center w-full gap-2">
-                <ServiceType type={data?.ty} className="" />
-                {data?.name && (
-                  <ServicePlaygroundTrigger
-                    service={data?.name}
-                    className=""
-                    variant="primary"
-                  />
-                )}
-              </div>
+              <TruncateWithTooltip>
+                {data?.name ?? 'Service'}
+              </TruncateWithTooltip>
+              {data && (
+                <div className="flex items-center w-full gap-2">
+                  <ServiceType type={data?.ty} className="" />
+                  {data?.name && (
+                    <ServicePlaygroundTrigger
+                      service={data?.name}
+                      className=""
+                      variant="primary"
+                    />
+                  )}
+                </div>
+              )}
             </>
           )}
         </div>

diff --git a/libs/ui/error/src/lib/RestateServerError.tsx b/libs/ui/error/src/lib/RestateServerError.tsx
@@ -62,7 +62,10 @@ export function RestateServerError({
       <div className="flex flex-col gap-2 w-full">
         <Code className="shadow-[inset_0_0.5px_0.5px_0px_rgba(0,0,0,0.08)] border bg-red-200 py-4 text-code flex-auto text-red-700">
           <Snippet language="bash" className="px-0">
-            <details className="group [font-size:90%] overflow-auto max-h-28 w-full">
+            <details
+              className="group [font-size:90%] overflow-auto max-h-28 w-full"
+              open
+            >
               <summary className="group-open:h-4">
                 <span className="group-open:invisible group-open:[font-size:0px] truncate w-[calc(100%-5ch)] inline-block align-middle">
                   {message}

diff --git a/libs/ui/form-field/src/lib/MultiCombobox/MultiCombobox.tsx b/libs/ui/form-field/src/lib/MultiCombobox/MultiCombobox.tsx
@@ -229,7 +229,7 @@ export function FormFieldMultiCombobox<
         <Label className="sr-only">{label}</Label>
 
         <div
-          className="hidden gap-1.5 flex-wrap px-1 py-1 has-[>*]:flex"
+          className="hidden gap-1.5 flex-wrap px-1 py-1 has-[>*]:flex max-w-full"
           id={tagGroupId}
         >
           {selectedList.items.map((item) => (

diff --git a/libs/ui/layout/src/lib/Toolbar.tsx b/libs/ui/layout/src/lib/Toolbar.tsx
@@ -6,10 +6,10 @@ interface ToolbarProps {
 
 export function Toolbar(props: PropsWithChildren<ToolbarProps>) {
   return (
-    <div className="max-w-full hidden [&:has(>*>*)]:flex z-50 min-h-20 sticky items-center justify-center bottom-0 bg-gradient-to-b from-transparent to-gray-100">
+    <div className="max-w-full hidden [&:has(>*>*)]:flex z-10 min-h-20 sticky items-center justify-center bottom-0 bg-gradient-to-b from-transparent to-gray-100/80">
       <div
         {...props}
-        className=" max-w-full backdrop-blur-xl text-zinc-200 border-zinc-900/80 bg-gradient-to-b from-zinc-900/90 to-zinc-900/80 px-0 py-0 rounded-xl shadow-[inset_0_1px_0_0_rgba(255,255,255,0.4)] [filter:drop-shadow(0_8px_6px_rgb(39_39_42/0.15))_drop-shadow(0_4px_3px_rgb(39_39_42/0.2))]"
+        className="mb-4 max-w-full backdrop-blur-xl text-zinc-200 border-zinc-900/80 bg-gradient-to-b from-zinc-900/90 to-zinc-900/80 px-0 py-0 rounded-xl shadow-[inset_0_1px_0_0_rgba(255,255,255,0.4)] [filter:drop-shadow(0_8px_6px_rgb(39_39_42/0.15))_drop-shadow(0_4px_3px_rgb(39_39_42/0.2))]"
       />
     </div>
   );