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.
2026-08-18 01:19:42 +07:00
parent 357ed4ce7b
commit 44f70443c3
17 changed files with 375 additions and 303 deletions
@@ -29,10 +29,10 @@ export function FrameDataGrid({
 }) {
  const hasHeader = Boolean(title || description || actions)
  return (
-    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
+    <Frame dense spacing="sm" className={cn('w-full min-w-0 gap-0 p-0', className)}>
      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
        {hasHeader ? (
-          <FrameHeader className="flex-row items-start justify-between gap-3 border-b">
+          <FrameHeader className="flex-col items-stretch gap-3 border-b sm:flex-row sm:items-start sm:justify-between">
            <div className="flex min-w-0 flex-1 flex-col gap-px">
              {title ? <FrameTitle>{title}</FrameTitle> : null}
              {description ? (