refactor: update dialog components and enhance UI consistency

Refactored ConfirmDialog and FormDrawer components to improve layout and user experience. Integrated new DrawerActionsFooter for better action handling in dialogs. Updated styles for consistency across components, including adjustments to the skeletons and analytics card layouts. Removed deprecated alert components from various routes to streamline the codebase and enhance clarity in the UI.

apps/web/src/components/analytics/analytics-card-shell.tsx

@@ -34,7 +34,7 @@ export function AnalyticsCardShell({
   children: ReactNode
 }) {
   return (
-    <Card className={cn('flex h-full flex-col gap-0 overflow-hidden', className)}>
+    <Card className={cn('flex flex-col gap-0 overflow-hidden', className)}>
       <CardHeader className="flex flex-row items-start justify-between gap-3 border-b py-4">
         <div className="min-w-0 space-y-1">
           <CardTitle className="flex items-center gap-2 text-base">
@@ -57,7 +57,7 @@ export function AnalyticsCardShell({
         </div>
         {actions ? <div className="shrink-0">{actions}</div> : null}
       </CardHeader>
-      <CardContent className="flex flex-1 flex-col gap-5 p-5">{children}</CardContent>
+      <CardContent className="flex flex-col gap-5 p-5">{children}</CardContent>
       {footer ? <CardFooter className="gap-2 border-t p-4">{footer}</CardFooter> : null}
     </Card>
   )

apps/web/src/components/confirm-dialog.tsx

@@ -4,13 +4,17 @@ import {
   DrawerClose,
   DrawerContent,
   DrawerDescription,
-  DrawerFooter,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
 } from '@evobgp/ui/components/drawer'
 import type { ReactElement, ReactNode } from 'react'
 
+import {
+  confirmDrawerContentClassName,
+  DrawerActionsFooter,
+} from '@/components/drawer-layout'
+
 type ConfirmDialogBaseProps = {
   title: string
   description?: ReactNode
@@ -58,11 +62,11 @@ function ConfirmDrawerBody({
 
   return (
     <>
-      <DrawerHeader>
+      <DrawerHeader className="shrink-0 border-b border-border pb-4">
         <DrawerTitle>{title}</DrawerTitle>
         {description ? <DrawerDescription>{description}</DrawerDescription> : null}
       </DrawerHeader>
-      <DrawerFooter className="border-t bg-muted/50 sm:flex-row sm:justify-end">
+      <DrawerActionsFooter>
         <DrawerClose render={<Button variant="outline" disabled={confirmLoading} />}>
           {cancelLabel}
         </DrawerClose>
@@ -87,7 +91,7 @@ function ConfirmDrawerBody({
             {confirmText}
           </DrawerClose>
         )}
-      </DrawerFooter>
+      </DrawerActionsFooter>
     </>
   )
 }
@@ -109,7 +113,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
     return (
       <Drawer swipeDirection="right">
         <DrawerTrigger render={props.trigger} />
-        <DrawerContent className="h-full max-h-none sm:max-w-sm">
+        <DrawerContent className={confirmDrawerContentClassName}>
           <ConfirmDrawerBody {...bodyProps} />
         </DrawerContent>
       </Drawer>
@@ -118,7 +122,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
 
   return (
     <Drawer open={props.open} onOpenChange={props.onOpenChange} swipeDirection="right">
-      <DrawerContent className="h-full max-h-none sm:max-w-sm">
+      <DrawerContent className={confirmDrawerContentClassName}>
         <ConfirmDrawerBody {...bodyProps} controlled />
       </DrawerContent>
     </Drawer>

apps/web/src/components/drawer-layout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import { DrawerFooter } from '@evobgp/ui/components/drawer'
+
+/** Shared footer layout for right-side form and confirm drawers. */
+export function DrawerActionsFooter({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <DrawerFooter
+      className={cn(
+        'mt-0 shrink-0 border-t border-border bg-muted/50 p-4',
+        className,
+      )}
+    >
+      <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+        {children}
+      </div>
+    </DrawerFooter>
+  )
+}
+
+export const formDrawerContentClassName =
+  'flex h-full max-h-dvh flex-col sm:max-w-lg'
+
+export const confirmDrawerContentClassName = 'flex h-auto max-h-dvh flex-col sm:max-w-sm'

apps/web/src/components/form-drawer.tsx

@@ -5,12 +5,16 @@ import {
   Drawer,
   DrawerContent,
   DrawerDescription,
-  DrawerFooter,
   DrawerHeader,
   DrawerTitle,
 } from '@evobgp/ui/components/drawer'
 import { ScrollArea } from '@evobgp/ui/components/scroll-area'
 
+import {
+  DrawerActionsFooter,
+  formDrawerContentClassName,
+} from '@/components/drawer-layout'
+
 interface FormDrawerProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -32,15 +36,15 @@ export function FormDrawer({
 }: FormDrawerProps) {
   return (
     <Drawer open={open} onOpenChange={onOpenChange} swipeDirection="right">
-      <DrawerContent className={cn('h-full max-h-none sm:max-w-lg', className)}>
-        <DrawerHeader>
+      <DrawerContent className={cn(formDrawerContentClassName, className)}>
+        <DrawerHeader className="shrink-0 border-b border-border pb-4">
           <DrawerTitle>{title}</DrawerTitle>
           {description ? <DrawerDescription>{description}</DrawerDescription> : null}
         </DrawerHeader>
-        <ScrollArea className="min-h-0 flex-1 px-4">
-          <div className="space-y-4 pb-4">{children}</div>
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="space-y-4 px-4 py-4">{children}</div>
         </ScrollArea>
-        <DrawerFooter className="border-t bg-muted/50 sm:flex-row sm:justify-end">{footer}</DrawerFooter>
+        <DrawerActionsFooter>{footer}</DrawerActionsFooter>
       </DrawerContent>
     </Drawer>
   )

apps/web/src/components/skeletons.tsx

@@ -17,8 +17,8 @@ export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
 
 export function AnalyticsDashboardSkeleton() {
   return (
-    <div className="grid gap-4 lg:grid-cols-3 lg:grid-rows-2">
-      <Card className="gap-0 lg:row-span-2">
+    <div className="grid gap-4 lg:grid-cols-3 lg:items-start">
+      <Card className="gap-0">
         <CardContent className="space-y-4 p-5">
           <Skeleton className="h-4 w-40" />
           <div className="grid gap-4 sm:grid-cols-3">