refactor(web): improve layout and responsiveness of settings components

Enhanced various settings components by adding 'min-w-0' class for better overflow handling and adjusting flex properties for improved alignment. Updated card and grid structures to ensure a cohesive user experience across the settings interface. Refined descriptions and layout in several settings tabs for better clarity and usability.

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -2,7 +2,6 @@ import type { ReactNode } from 'react'
 import { Link, Outlet, useRouterState } from '@tanstack/react-router'
 import { ServerCogIcon, SettingsIcon } from 'lucide-react'
 
-import { useIsMobile } from '@evobgp/ui/hooks/use-mobile'
 import { cn } from '@evobgp/ui/lib/utils'
 import { PageShell } from '@/components/page-shell'
 import { PageHeader } from '@/components/page-header'
@@ -37,7 +36,8 @@ interface SettingsShellProps {
 }
 
 /**
- * Settings shell — Frame surface, no hairline Separator under header.
+ * Settings shell — Frame surface, settings-16 left rail.
+ * Rail stacks above content until the page container is wide enough (no viewport-only squeeze).
  * @see https://reui.io/preview/base/settings-16
  * @see https://reui.io/preview/base/settings-3
  */
@@ -46,7 +46,6 @@ export function SettingsShell({
   description,
   tabs = DEFAULT_TABS,
 }: SettingsShellProps) {
-  const isMobile = useIsMobile()
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const headerDescription =
     description ??
@@ -56,31 +55,20 @@ export function SettingsShell({
 
   return (
     <PageShell>
-      <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
+      <div className="@container mx-auto flex w-full min-w-0 max-w-5xl flex-col gap-5">
         <PageHeader title={title} description={headerDescription} />
 
-        <div
-          className={cn(
-            'flex gap-5',
-            isMobile ? 'flex-col' : 'flex-row items-start',
-          )}
-        >
+        <div className="flex min-w-0 flex-col gap-5 @3xl:flex-row @3xl:items-start">
           {tabs.length > 1 ? (
             <nav
               aria-label="Разделы настроек"
-              className={cn(
-                'flex gap-1',
-                isMobile
-                  ? 'scrollbar-none -mx-1 overflow-x-auto overflow-y-hidden pb-1'
-                  : 'w-44 shrink-0 flex-col',
-              )}
+              className="scrollbar-none flex min-w-0 gap-1 overflow-x-auto @3xl:w-44 @3xl:shrink-0 @3xl:flex-col @3xl:overflow-visible"
             >
               {tabs.map((tab) => {
                 const isActive = pathname.startsWith(tab.to)
                 const className = cn(
-                  'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
-                  isMobile && 'shrink-0',
-                  !isMobile && 'w-full',
+                  'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+                  '@3xl:w-full',
                   isActive
                     ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
                     : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',