fix: minor ui tweaks

MattKetmo · Nov 22, 2024 · b24b33a · b24b33a
1 parent d89f9de
commit b24b33a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/src/components/alerts/alert-groups.tsx b/src/components/alerts/alert-groups.tsx
@@ -79,8 +79,8 @@ function AlertGroupHeader(props: AlertGroupHeaderProps) {
 
   return (
     <div className="flex space-x-2 items-center w-full">
-      <div className="flex items-baseline gap-2">
-        <span className="text-sm font-mono font-medium group-hover:underline">
+      <div className="flex items-baseline gap-2 overflow-hidden">
+        <span className="text-sm font-mono truncate font-medium group-hover:underline">
           {name}
         </span>
         <span className="text-xs text-slate-500 bg-secondary rounded-sm p-1 w-6 text-center">
@@ -89,10 +89,7 @@ function AlertGroupHeader(props: AlertGroupHeaderProps) {
       </div>
       <div className="grow" />
       <div>
-        <ChevronDown size={16} className={cn(
-          'transition-transform',
-          !open ? '-rotate-90' : '',
-        )} />
+        <ChevronDown size={16} className={cn('transition-transform', !open ? '-rotate-90' : '')} />
       </div>
     </div>
   )

diff --git a/src/components/alerts/template.tsx b/src/components/alerts/template.tsx
@@ -188,7 +188,7 @@ export function AlertsTemplate(props: Props) {
         </div>
       </div>
 
-      <div className="overflow-auto">
+      <div className="overflow-x-clip overflow-y-auto">
         <AlertGroups alertGroups={alertGroups} />
 
         <footer className="my-6 text-xs flex gap-2 justify-center text-muted-foreground">

diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx
@@ -10,7 +10,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
       <AppSidebar />
       <CommandMenu />
       <main className="grow relative bg-sidebar">
-        <div className="absolute inset-0 bg-background m-2 rounded-sm overflow-auto border">
+        <div className="absolute inset-0 bg-background m-2 rounded-lg overflow-auto border">
           {children}
         </div>
       </main>

diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
@@ -107,7 +107,7 @@ export function AppSidebar() {
                     <CollapsibleTrigger asChild>
                       <SidebarMenuButton >
                         <SquareDot />
-                        <span>{viewCategories[category]?.name || category}</span>
+                        <span className="truncate">{viewCategories[category]?.name || category}</span>
                         <ChevronRight className="transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90" />
                       </SidebarMenuButton>
                     </CollapsibleTrigger>