From a5ab6bb0b76b16f362a2dbb605762ac2fa46a367 Mon Sep 17 00:00:00 2001
From: Zzde <zhangxh1997@gmail.com>
Date: Sun, 29 Mar 2026 00:36:44 +0800
Subject: [PATCH] polish mobile UI layouts

---
 ui/src/components/ai-chat/ai-chatbox.tsx      |   2 +-
 ui/src/components/container-info-card.tsx     |   7 +-
 .../editors/deployment-create-dialog.tsx      |  22 +--
 .../components/editors/environment-editor.tsx |   2 +-
 ui/src/components/node-monitoring.tsx         |   6 +-
 ui/src/components/pod-monitoring.tsx          |  14 +-
 ui/src/components/related-resource-table.tsx  |  10 +-
 ui/src/components/resource-table-view.tsx     |  12 +-
 ui/src/components/resource-table.tsx          | 154 +++++++++---------
 ui/src/components/resources-charts.tsx        |   2 +-
 .../selector/container-selector.tsx           |  12 +-
 ui/src/components/selector/crd-selector.tsx   |   8 +-
 .../selector/namespace-selector.tsx           |   7 +-
 ui/src/components/selector/pod-selector.tsx   |  16 +-
 ui/src/components/settings/cluster-dialog.tsx |   2 +-
 .../settings/oauth-provider-dialog.tsx        |   8 +-
 ui/src/components/settings/rbac-dialog.tsx    |   2 +-
 ui/src/components/sidebar-customizer.tsx      |  39 +++--
 ui/src/components/simple-table.tsx            |   6 +-
 ui/src/components/ui/command.tsx              |   4 +-
 ui/src/components/ui/dialog.tsx               |   2 +-
 ui/src/components/ui/popover.tsx              |   2 +-
 ui/src/components/ui/sheet.tsx                |   4 +-
 ui/src/components/ui/sidebar.tsx              |   2 +-
 ui/src/pages/configmap-detail.tsx             |   6 +-
 ui/src/pages/cronjob-detail.tsx               |   8 +-
 ui/src/pages/daemonset-detail.tsx             |   8 +-
 ui/src/pages/deployment-detail.tsx            |   8 +-
 ui/src/pages/job-detail.tsx                   |   8 +-
 ui/src/pages/node-detail.tsx                  |   8 +-
 ui/src/pages/pod-detail.tsx                   |   8 +-
 ui/src/pages/secret-detail.tsx                |   6 +-
 ui/src/pages/service-detail.tsx               |   6 +-
 ui/src/pages/simple-resource-detail.tsx       |   6 +-
 ui/src/pages/statefulset-detail.tsx           |   8 +-
 35 files changed, 231 insertions(+), 194 deletions(-)

diff --git a/ui/src/components/ai-chat/ai-chatbox.tsx b/ui/src/components/ai-chat/ai-chatbox.tsx
index b2f77cc0..b0ec1246 100644
--- a/ui/src/components/ai-chat/ai-chatbox.tsx
+++ b/ui/src/components/ai-chat/ai-chatbox.tsx
@@ -1204,7 +1204,7 @@ export function AIChatbox({
           <div className="flex items-end gap-2">
             <textarea
               ref={inputRef}
-              className="flex-1 min-w-0 resize-none rounded-md border bg-background px-3 py-2 text-sm leading-5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              className="flex-1 min-w-0 resize-none rounded-md border bg-background px-3 py-2 text-base leading-5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring md:text-sm"
               placeholder="Ask about your cluster..."
               rows={1}
               value={input}
diff --git a/ui/src/components/container-info-card.tsx b/ui/src/components/container-info-card.tsx
index 14a53675..3091f92b 100644
--- a/ui/src/components/container-info-card.tsx
+++ b/ui/src/components/container-info-card.tsx
@@ -350,7 +350,10 @@ export function ContainerInfoCard({
                 </Label>
                 <div className="mt-2 space-y-1">
                   {container.volumeMounts.map((mount, i) => (
-                    <div key={i} className="flex items-center gap-2 text-xs">
+                    <div
+                      key={i}
+                      className="flex flex-wrap items-center gap-2 text-xs"
+                    >
                       <Badge variant="outline" className="text-xs font-mono">
                         {mount.name}
                       </Badge>
@@ -378,7 +381,7 @@ export function ContainerInfoCard({
               (container.resources.requests || container.resources.limits) && (
                 <div className="border-t pt-3">
                   <Label className={sectionLabelClassName}>Resources</Label>
-                  <div className="mt-2 grid grid-cols-2 gap-4 text-sm">
+                  <div className="mt-2 grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
                     {container.resources.requests && (
                       <div>
                         <div className="text-xs font-medium text-green-600 dark:text-green-400 mb-1">
diff --git a/ui/src/components/editors/deployment-create-dialog.tsx b/ui/src/components/editors/deployment-create-dialog.tsx
index 5290b36f..4839f264 100644
--- a/ui/src/components/editors/deployment-create-dialog.tsx
+++ b/ui/src/components/editors/deployment-create-dialog.tsx
@@ -627,7 +627,7 @@ export function DeploymentCreateDialog({
       case 2:
         return (
           <div className="space-y-4">
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
               <Label>Volume</Label>
               <Button
                 type="button"
@@ -740,7 +740,7 @@ export function DeploymentCreateDialog({
       case 3:
         return (
           <div className="space-y-6">
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
               <Label className="text-lg font-medium">Containers</Label>
               <Button
                 type="button"
@@ -755,7 +755,7 @@ export function DeploymentCreateDialog({
             {formData.containers.map((containerConfig, containerIndex) => (
               <Card key={containerIndex}>
                 <CardHeader className="pb-3">
-                  <div className="flex items-center justify-between">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                     <CardTitle className="text-base">
                       Container {containerIndex + 1}
                     </CardTitle>
@@ -765,6 +765,7 @@ export function DeploymentCreateDialog({
                         variant="outline"
                         size="sm"
                         onClick={() => removeContainer(containerIndex)}
+                        aria-label={`Remove container ${containerIndex + 1}`}
                       >
                         <Trash2 className="w-4 h-4" />
                       </Button>
@@ -772,7 +773,7 @@ export function DeploymentCreateDialog({
                   </div>
                 </CardHeader>
                 <CardContent className="space-y-4">
-                  <div className="grid grid-cols-2 gap-4">
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                     <div className="space-y-2">
                       <ImageEditor
                         container={containerConfig.container}
@@ -811,7 +812,7 @@ export function DeploymentCreateDialog({
 
                   <div className="space-y-2">
                     <Label>Resources (optional)</Label>
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                       <div className="space-y-2">
                         <Label className="text-sm text-muted-foreground">
                           Requests
@@ -904,7 +905,7 @@ export function DeploymentCreateDialog({
                     />
                   </div>
 
-                  <div className="grid grid-cols-2 gap-4">
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                     <div className="space-y-2">
                       <Label htmlFor={`port-${containerIndex}`}>
                         Container Port (optional)
@@ -955,7 +956,7 @@ export function DeploymentCreateDialog({
                   </div>
                   {(formData.podSpec?.volumes?.length || 0) > 0 && (
                     <div className="space-y-2">
-                      <div className="flex items-center justify-between">
+                      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                         <Label>Volume Mounts</Label>
                         <Button
                           type="button"
@@ -990,7 +991,7 @@ export function DeploymentCreateDialog({
                         (mount, mountIndex) => (
                           <div
                             key={mountIndex}
-                            className="flex gap-2 items-center"
+                            className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center"
                           >
                             <Select
                               value={mount.name}
@@ -1007,7 +1008,7 @@ export function DeploymentCreateDialog({
                                 })
                               }}
                             >
-                              <SelectTrigger className="w-[160px]">
+                              <SelectTrigger className="w-full sm:w-[160px]">
                                 <SelectValue placeholder="Volume name" />
                               </SelectTrigger>
                               <SelectContent>
@@ -1071,7 +1072,7 @@ export function DeploymentCreateDialog({
                                 })
                               }}
                             >
-                              <SelectTrigger className="w-[160px]">
+                              <SelectTrigger className="w-full sm:w-[160px]">
                                 <SelectValue />
                               </SelectTrigger>
                               <SelectContent>
@@ -1085,6 +1086,7 @@ export function DeploymentCreateDialog({
                               variant="outline"
                               size="icon"
                               className="w-7 h-7"
+                              aria-label={`Remove volume mount ${mountIndex + 1}`}
                               onClick={() => {
                                 const updatedMounts =
                                   containerConfig.volumeMounts?.filter(
diff --git a/ui/src/components/editors/environment-editor.tsx b/ui/src/components/editors/environment-editor.tsx
index 001f3376..ae727fb9 100644
--- a/ui/src/components/editors/environment-editor.tsx
+++ b/ui/src/components/editors/environment-editor.tsx
@@ -499,7 +499,7 @@ export function EnvironmentEditor({
                       )}
 
                       {env.valueFrom.resourceFieldRef && (
-                        <div className="grid grid-cols-2 gap-2">
+                        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                           <div>
                             <Label className="text-xs text-muted-foreground">
                               Resource
diff --git a/ui/src/components/node-monitoring.tsx b/ui/src/components/node-monitoring.tsx
index 53169590..2f7774d1 100644
--- a/ui/src/components/node-monitoring.tsx
+++ b/ui/src/components/node-monitoring.tsx
@@ -36,10 +36,10 @@ export function NodeMonitoring({ name }: NodeMonitoringProps) {
   return (
     <div className="space-y-6">
       {/* Controls */}
-      <div className="flex flex-col sm:flex-row gap-4">
-        <div className="space-y-2">
+      <div className="flex flex-col gap-4 md:flex-row">
+        <div className="w-full space-y-2 md:w-auto">
           <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger className="w-[200px]">
+            <SelectTrigger className="w-full md:w-[200px]">
               <SelectValue placeholder="Select time range" />
             </SelectTrigger>
             <SelectContent>
diff --git a/ui/src/components/pod-monitoring.tsx b/ui/src/components/pod-monitoring.tsx
index 64c0aea4..9c28dad5 100644
--- a/ui/src/components/pod-monitoring.tsx
+++ b/ui/src/components/pod-monitoring.tsx
@@ -87,10 +87,10 @@ export function PodMonitoring({
   return (
     <div className="space-y-6">
       {/* Controls */}
-      <div className="flex flex-col sm:flex-row gap-4">
-        <div className="space-y-2">
+      <div className="flex flex-col gap-4 md:flex-row md:flex-wrap">
+        <div className="w-full space-y-2 md:w-auto">
           <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger className="w-[200px]">
+            <SelectTrigger className="w-full md:w-[200px]">
               <SelectValue placeholder="Select time range" />
             </SelectTrigger>
             <SelectContent>
@@ -103,12 +103,12 @@ export function PodMonitoring({
           </Select>
         </div>
 
-        <div className="space-y-2">
+        <div className="w-full space-y-2 md:w-auto">
           <Select
             value={refreshInterval.toString()}
             onValueChange={(value) => setRefreshInterval(Number(value))}
           >
-            <SelectTrigger className="w-[200px]">
+            <SelectTrigger className="w-full md:w-[200px]">
               <SelectValue placeholder="Select refresh interval" />
             </SelectTrigger>
             <SelectContent>
@@ -121,7 +121,7 @@ export function PodMonitoring({
           </Select>
         </div>
 
-        <div className="space-y-2">
+        <div className="w-full space-y-2 md:w-auto md:min-w-[220px]">
           <ContainerSelector
             containers={containers}
             selectedContainer={selectedContainer}
@@ -129,7 +129,7 @@ export function PodMonitoring({
           />
         </div>
         {pods && pods.length > 1 && (
-          <div className="space-y-2">
+          <div className="w-full space-y-2 md:w-auto md:min-w-[220px]">
             {/* Pod Selector */}
             <PodSelector
               pods={pods}
diff --git a/ui/src/components/related-resource-table.tsx b/ui/src/components/related-resource-table.tsx
index 309a8ce1..813c22e6 100644
--- a/ui/src/components/related-resource-table.tsx
+++ b/ui/src/components/related-resource-table.tsx
@@ -92,18 +92,22 @@ function RelatedResourceCell({ rs }: { rs: RelatedResources }) {
       <DialogTrigger asChild>
         <div className="font-medium app-link cursor-pointer">{rs.name}</div>
       </DialogTrigger>
-      <DialogContent className="!max-w-[60%] !h-[80%] flex flex-col">
+      <DialogContent className="!h-[calc(100dvh-1rem)] !max-w-[calc(100vw-1rem)] flex min-h-0 flex-col md:!h-[80%] md:!max-w-[60%]">
         <DialogHeader className="flex flex-row justify-between items-center">
           <DialogTitle className="capitalize">{rs.type}</DialogTitle>
           <a href={withSubPath(path)} target="_blank" rel="noopener noreferrer">
-            <Button variant="outline" size="icon">
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Open resource in new tab"
+            >
               <IconExternalLink size={12} />
             </Button>
           </a>
         </DialogHeader>
         <iframe
           src={`${withSubPath(path)}?iframe=true`}
-          className="w-full flex-grow border-none"
+          className="min-h-0 w-full flex-grow border-none"
         />
       </DialogContent>
     </Dialog>
diff --git a/ui/src/components/resource-table-view.tsx b/ui/src/components/resource-table-view.tsx
index 63536606..403cf3dd 100644
--- a/ui/src/components/resource-table-view.tsx
+++ b/ui/src/components/resource-table-view.tsx
@@ -45,7 +45,7 @@ export function ResourceTableView<T>({
   isLoading,
   data,
   allPageSize,
-  maxBodyHeightClassName = 'max-h-[calc(100vh-210px)]',
+  maxBodyHeightClassName = 'max-h-[calc(100dvh-210px)]',
   containerClassName = 'flex flex-col gap-3',
   emptyState,
   hasActiveFilters,
@@ -151,7 +151,7 @@ export function ResourceTableView<T>({
       </div>
 
       {dataLength > 0 && (
-        <div className="flex items-center justify-between px-2 py-1">
+        <div className="flex flex-col gap-3 px-2 py-1 sm:flex-row sm:items-center sm:justify-between">
           <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
             {hasActiveFilters ? (
               <>
@@ -164,8 +164,8 @@ export function ResourceTableView<T>({
               `${totalRowCount} row(s) total.`
             )}
           </div>
-          <div className="flex w-full items-center gap-4 lg:w-fit">
-            <div className="flex items-center gap-2">
+          <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 lg:w-fit">
+            <div className="flex items-center justify-between gap-2 sm:justify-start">
               <span className="text-sm text-muted-foreground">
                 Rows per page:
               </span>
@@ -196,10 +196,10 @@ export function ResourceTableView<T>({
                 </SelectContent>
               </Select>
             </div>
-            <div className="flex w-fit items-center justify-center text-sm font-medium">
+            <div className="flex items-center justify-center text-sm font-medium">
               Page {pagination.pageIndex + 1} of {table.getPageCount() || 1}
             </div>
-            <div className="ml-auto flex items-center gap-2 lg:ml-0">
+            <div className="flex items-center justify-end gap-2 sm:justify-start lg:ml-0">
               <Button
                 variant="outline"
                 className="size-8"
diff --git a/ui/src/components/resource-table.tsx b/ui/src/components/resource-table.tsx
index 4fe60cf5..65cada7c 100644
--- a/ui/src/components/resource-table.tsx
+++ b/ui/src/components/resource-table.tsx
@@ -527,7 +527,7 @@ export function ResourceTable<T>({
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
         <div>
           <h1 className="text-2xl font-bold capitalize">{resourceName}</h1>
           {!clusterScope && selectedNamespace && (
@@ -542,8 +542,8 @@ export function ResourceTable<T>({
           )}
         </div>
 
-        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
-          <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:flex-wrap">
+          <div className="flex flex-wrap items-center gap-2">
             {extraToolbars?.map((toolbar, index) => (
               <React.Fragment key={index}>{toolbar}</React.Fragment>
             ))}
@@ -583,7 +583,7 @@ export function ResourceTable<T>({
               }}
               disabled={useSSE}
             >
-              <SelectTrigger className="max-w-[140px]">
+              <SelectTrigger className="w-full md:w-[140px]">
                 <div className="flex items-center gap-2">
                   <RefreshCw className="h-4 w-4" />
                   <SelectValue />
@@ -628,7 +628,7 @@ export function ResourceTable<T>({
                       column.setFilterValue(value === 'all' ? '' : value)
                     }
                   >
-                    <SelectTrigger className="min-w-32">
+                    <SelectTrigger className="w-full md:min-w-32 md:w-auto">
                       <SelectValue
                         placeholder={`Filter ${typeof columnDef.header === 'string' ? columnDef.header : 'Column'}`}
                       />
@@ -658,80 +658,88 @@ export function ResourceTable<T>({
               })}
           </div>
 
-          {/* Search bar */}
-          <div className="flex items-center gap-2 w-full sm:w-auto">
-            <div className="relative w-full sm:w-auto">
-              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                placeholder={`Search ${resourceName.toLowerCase()}...`}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9 pr-4 w-full sm:w-[100px] md:w-[200px]"
-              />
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="flex w-full items-center gap-2 md:w-auto">
+              <div className="relative w-full md:w-auto">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder={`Search ${resourceName.toLowerCase()}...`}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-9 pr-4 md:w-[200px]"
+                />
+              </div>
+              {searchQuery && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setSearchQuery('')}
+                  className="h-9 w-9"
+                  aria-label="Clear search"
+                >
+                  <XCircle className="h-4 w-4" />
+                </Button>
+              )}
             </div>
-            {searchQuery && (
+
+            {/* Batch delete button */}
+            {table.getSelectedRowModel().rows.length > 0 && (
               <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setSearchQuery('')}
-                className="h-9 w-9"
+                variant="destructive"
+                onClick={() => setDeleteDialogOpen(true)}
+                className="gap-2"
               >
-                <XCircle className="h-4 w-4" />
+                <Trash2 className="h-4 w-4" />
+                {t('resourceTable.deleteSelected', {
+                  count: table.getSelectedRowModel().rows.length,
+                })}
               </Button>
             )}
-          </div>
-          {/* Batch delete button */}
-          {table.getSelectedRowModel().rows.length > 0 && (
-            <Button
-              variant="destructive"
-              onClick={() => setDeleteDialogOpen(true)}
-              className="gap-2"
-            >
-              <Trash2 className="h-4 w-4" />
-              {t('resourceTable.deleteSelected', {
-                count: table.getSelectedRowModel().rows.length,
-              })}
-            </Button>
-          )}
-          {showCreateButton && onCreateClick && (
-            <Button onClick={onCreateClick} className="gap-1">
-              <Plus className="h-2 w-2" />
-              New
-            </Button>
-          )}
-
-          {/* Toggle columns Dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="icon" className="h-9 w-9">
-                <Settings2 className="h-4 w-4" />
+            {showCreateButton && onCreateClick && (
+              <Button onClick={onCreateClick} className="gap-1">
+                <Plus className="h-2 w-2" />
+                New
               </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              {table
-                .getAllLeafColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  const header = column.columnDef.header
-                  const headerText =
-                    typeof header === 'string' ? header : column.id
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {headerText}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
+            )}
+
+            {/* Toggle columns Dropdown */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-9 w-9"
+                  aria-label="Toggle columns"
+                >
+                  <Settings2 className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {table
+                  .getAllLeafColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    const header = column.columnDef.header
+                    const headerText =
+                      typeof header === 'string' ? header : column.id
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {headerText}
+                      </DropdownMenuCheckboxItem>
+                    )
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
 
diff --git a/ui/src/components/resources-charts.tsx b/ui/src/components/resources-charts.tsx
index 5572d720..37c49334 100644
--- a/ui/src/components/resources-charts.tsx
+++ b/ui/src/components/resources-charts.tsx
@@ -104,7 +104,7 @@ export function ResourceCharts(props: ResourceChartsProps) {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
-                <div className="grid grid-cols-2 gap-6">
+                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                   <div>
                     <div className="flex justify-between text-xs text-muted-foreground mb-1">
                       <span className="font-medium text-blue-600">
diff --git a/ui/src/components/selector/container-selector.tsx b/ui/src/components/selector/container-selector.tsx
index 155652cd..46d2eb7c 100644
--- a/ui/src/components/selector/container-selector.tsx
+++ b/ui/src/components/selector/container-selector.tsx
@@ -49,13 +49,15 @@ export function ContainerSelector({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="max-w-[300px] justify-between"
+          className="w-full min-w-0 justify-between md:w-auto md:max-w-[300px]"
         >
-          {selectedOption ? selectedOption.name : placeholder}
+          <span className="truncate">
+            {selectedOption ? selectedOption.name : placeholder}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="max-w-[300px] p-0">
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] max-w-[min(300px,calc(100vw-1rem))] p-0">
         <Command>
           <CommandInput placeholder="Search containers..." />
           <CommandList>
@@ -82,7 +84,7 @@ export function ContainerSelector({
                         : 'opacity-0'
                     )}
                   />
-                  <div className="flex flex-col">
+                  <div className="flex min-w-0 flex-col">
                     <span className="font-medium">
                       {container.name}
                       {container.init && (
@@ -92,7 +94,7 @@ export function ContainerSelector({
                       )}
                     </span>
                     {container.image && (
-                      <span className="text-xs text-muted-foreground">
+                      <span className="truncate text-xs text-muted-foreground">
                         {container.image}
                       </span>
                     )}
diff --git a/ui/src/components/selector/crd-selector.tsx b/ui/src/components/selector/crd-selector.tsx
index 08db0047..665c3370 100644
--- a/ui/src/components/selector/crd-selector.tsx
+++ b/ui/src/components/selector/crd-selector.tsx
@@ -121,19 +121,19 @@ export function CRDSelector({
           role="combobox"
           aria-expanded={open}
           disabled={disabled}
-          className="justify-between min-w-[200px]"
+          className="w-full min-w-0 justify-between md:w-auto md:min-w-[200px]"
         >
           <span
-            className={
+            className={`truncate ${
               selectedCRD ? 'text-foreground' : 'text-muted-foreground'
-            }
+            }`}
           >
             {selectedCRDData ? selectedCRDData.name : placeholder}
           </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[400px] p-0">
+      <PopoverContent className="w-[calc(100vw-1rem)] max-w-[400px] p-0 md:w-[400px]">
         <div className="p-2 border-b">
           <Input
             placeholder="Search CRDs..."
diff --git a/ui/src/components/selector/namespace-selector.tsx b/ui/src/components/selector/namespace-selector.tsx
index dd12e957..8a4d4b6c 100644
--- a/ui/src/components/selector/namespace-selector.tsx
+++ b/ui/src/components/selector/namespace-selector.tsx
@@ -47,7 +47,7 @@ export function NamespaceSelector({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between shadow-sm"
+          className="w-full min-w-0 justify-between shadow-sm md:w-[200px]"
         >
           <span className="truncate">
             {selectedNamespace === '_all'
@@ -58,7 +58,10 @@ export function NamespaceSelector({
         </Button>
       </PopoverTrigger>
 
-      <PopoverContent className="w-[200px] p-0" align="start">
+      <PopoverContent
+        className="w-[var(--radix-popover-trigger-width)] max-w-[calc(100vw-1rem)] p-0"
+        align="start"
+      >
         <Command>
           <CommandInput placeholder="Search..." className="h-9" />
           <CommandList className="max-h-[300px] overflow-x-hidden overflow-y-auto [ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
diff --git a/ui/src/components/selector/pod-selector.tsx b/ui/src/components/selector/pod-selector.tsx
index 2b1f03e0..ecc6eede 100644
--- a/ui/src/components/selector/pod-selector.tsx
+++ b/ui/src/components/selector/pod-selector.tsx
@@ -54,13 +54,15 @@ export function PodSelector({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="justify-between"
+          className="w-full min-w-0 justify-between md:w-auto md:max-w-[300px]"
         >
-          {selectedOption ? selectedOption.metadata?.name : 'All'}
+          <span className="truncate">
+            {selectedOption ? selectedOption.metadata?.name : 'All'}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="max-w-[300px] p-0">
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] max-w-[min(300px,calc(100vw-1rem))] p-0">
         <Command>
           <CommandInput placeholder="Search pods..." />
           <CommandList>
@@ -89,10 +91,12 @@ export function PodSelector({
                         : 'opacity-0'
                     )}
                   />
-                  <div className="flex flex-col">
-                    <span className="font-medium">{pod.metadata?.name}</span>
+                  <div className="flex min-w-0 flex-col">
+                    <span className="truncate font-medium">
+                      {pod.metadata?.name}
+                    </span>
                     {pod.metadata?.creationTimestamp && (
-                      <span className="text-xs text-muted-foreground">
+                      <span className="truncate text-xs text-muted-foreground">
                         Age: {getAge(pod.metadata?.creationTimestamp || '')},
                         Node: {pod.spec?.nodeName}
                       </span>
diff --git a/ui/src/components/settings/cluster-dialog.tsx b/ui/src/components/settings/cluster-dialog.tsx
index bf33f653..29957af5 100644
--- a/ui/src/components/settings/cluster-dialog.tsx
+++ b/ui/src/components/settings/cluster-dialog.tsx
@@ -101,7 +101,7 @@ function ClusterDialogContent({
       </DialogHeader>
 
       <form onSubmit={handleSubmit} className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div className="space-y-2">
             <Label htmlFor="cluster-name">
               {t('clusterManagement.form.name.label', 'Cluster Name')} *
diff --git a/ui/src/components/settings/oauth-provider-dialog.tsx b/ui/src/components/settings/oauth-provider-dialog.tsx
index a5df88b3..39786979 100644
--- a/ui/src/components/settings/oauth-provider-dialog.tsx
+++ b/ui/src/components/settings/oauth-provider-dialog.tsx
@@ -167,7 +167,7 @@ function OAuthProviderDialogContent({
               {t('oauthManagement.dialog.section.basic', 'Basic Information')}
             </h3>
           </div>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="name">
                 {t('oauthManagement.dialog.name', 'Name')} *
@@ -198,7 +198,7 @@ function OAuthProviderDialogContent({
               />
             </div>
           </div>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="client_id">
                 {t('oauthManagement.dialog.clientId', 'Client ID')} *
@@ -321,7 +321,7 @@ function OAuthProviderDialogContent({
               )}
             </h3>
           </div>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="usernameClaim">
                 {t('oauthManagement.dialog.usernameClaim', 'Username Claim')}
@@ -350,7 +350,7 @@ function OAuthProviderDialogContent({
                 )}
               />
             </div>
-            <div className="space-y-2 col-span-2">
+            <div className="space-y-2 sm:col-span-2">
               <Label htmlFor="allowedGroups">
                 {t('oauthManagement.dialog.allowedGroups', 'Allowed Groups')}
               </Label>
diff --git a/ui/src/components/settings/rbac-dialog.tsx b/ui/src/components/settings/rbac-dialog.tsx
index 12b29628..bb71151a 100644
--- a/ui/src/components/settings/rbac-dialog.tsx
+++ b/ui/src/components/settings/rbac-dialog.tsx
@@ -215,7 +215,7 @@ export function RBACDialog({
                 {t('rbac.form.permissions.label', 'Permissions')}
               </h3>
             </div>
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <ListEditor
                 label={t('rbac.form.clusters.label', 'Clusters')}
                 items={form.clusters || ['*']}
diff --git a/ui/src/components/sidebar-customizer.tsx b/ui/src/components/sidebar-customizer.tsx
index 18caacb2..89362e53 100644
--- a/ui/src/components/sidebar-customizer.tsx
+++ b/ui/src/components/sidebar-customizer.tsx
@@ -116,15 +116,15 @@ export function SidebarCustomizer({
         </DropdownMenuItem>
       </DialogTrigger>
 
-      <DialogContent className="!max-w-4xl max-h-[85vh] p-0">
-        <DialogHeader className="p-6 pb-2">
+      <DialogContent className="!max-w-4xl max-h-[calc(100dvh-1rem)] p-0">
+        <DialogHeader className="p-4 pb-2 sm:p-6 sm:pb-2">
           <DialogTitle className="flex items-center gap-2">
             <PanelLeftOpen className="h-5 w-5" />
             {t('sidebar.customizeTitle', 'Customize Sidebar')}
           </DialogTitle>
         </DialogHeader>
 
-        <div className="flex-1 px-6 max-h-[60vh] overflow-y-auto">
+        <div className="flex-1 overflow-y-auto px-4 max-h-[calc(100dvh-10rem)] sm:px-6">
           <div className="space-y-6 pb-6">
             {pinnedItems.length > 0 && (
               <>
@@ -143,9 +143,9 @@ export function SidebarCustomizer({
                       return (
                         <div
                           key={item.id}
-                          className="flex items-center justify-between p-2 border rounded-md bg-muted/20"
+                          className="flex flex-col gap-3 rounded-md border bg-muted/20 p-2 sm:flex-row sm:items-center sm:justify-between"
                         >
-                          <div className="flex items-center gap-2">
+                          <div className="flex flex-wrap items-center gap-2">
                             <IconComponent className="h-4 w-4 text-sidebar-primary" />
                             <span className="text-sm">{title}</span>
                             <Badge variant="outline" className="text-xs">
@@ -157,6 +157,7 @@ export function SidebarCustomizer({
                             size="sm"
                             onClick={() => toggleItemPin(item.id)}
                             className="h-8 w-8 p-0"
+                            aria-label="Unpin item"
                           >
                             <PinOff className="h-3.5 w-3.5" />
                           </Button>
@@ -176,8 +177,8 @@ export function SidebarCustomizer({
 
               {sortedGroups.map((group, index) => (
                 <div key={group.id} className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="flex flex-wrap items-center gap-2">
                       <h4 className="text-sm font-medium">
                         {group.nameKey
                           ? t(group.nameKey, { defaultValue: group.nameKey })
@@ -197,7 +198,7 @@ export function SidebarCustomizer({
                         /{group.items.length}
                       </Badge>
                     </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex flex-wrap items-center gap-1">
                       <Button
                         variant="ghost"
                         size="sm"
@@ -214,6 +215,7 @@ export function SidebarCustomizer({
                         onClick={() => toggleGroupVisibility(group.id)}
                         className="h-8 w-8 p-0"
                         title={group.visible ? 'Hide' : 'Show'}
+                        aria-label={group.visible ? 'Hide group' : 'Show group'}
                       >
                         {!group.visible ? (
                           <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
@@ -228,6 +230,7 @@ export function SidebarCustomizer({
                         className="h-8 w-8 p-0"
                         title={t('sidebar.moveUp', 'Move up')}
                         disabled={index === 0}
+                        aria-label={t('sidebar.moveUp', 'Move up')}
                       >
                         <ArrowUp className="h-3.5 w-3.5" />
                       </Button>
@@ -238,6 +241,7 @@ export function SidebarCustomizer({
                         className="h-8 w-8 p-0"
                         title={t('sidebar.moveDown', 'Move down')}
                         disabled={index === sortedGroups.length - 1}
+                        aria-label={t('sidebar.moveDown', 'Move down')}
                       >
                         <ArrowDown className="h-3.5 w-3.5" />
                       </Button>
@@ -248,6 +252,7 @@ export function SidebarCustomizer({
                           onClick={() => removeCustomGroup(group.id)}
                           className="h-8 w-8 p-0"
                           title="Delete custom group"
+                          aria-label="Delete custom group"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </Button>
@@ -269,13 +274,13 @@ export function SidebarCustomizer({
                       return (
                         <div
                           key={item.id}
-                          className={`flex items-center justify-between p-2 rounded border transition-colors ${
+                          className={`flex flex-col gap-3 rounded border p-2 transition-colors sm:flex-row sm:items-center sm:justify-between ${
                             isHidden
                               ? 'opacity-50 bg-muted/10'
                               : 'bg-background'
                           }`}
                         >
-                          <div className="flex items-center gap-2">
+                          <div className="flex flex-wrap items-center gap-2">
                             <IconComponent className="h-4 w-4 text-sidebar-primary" />
                             <span className="text-sm">{title}</span>
                             {isPinned && (
@@ -286,13 +291,14 @@ export function SidebarCustomizer({
                             )}
                           </div>
 
-                          <div className="flex items-center gap-1">
+                          <div className="flex items-center gap-1 self-end sm:self-auto">
                             <Button
                               variant="ghost"
                               size="sm"
                               onClick={() => toggleItemPin(item.id)}
                               className={`h-8 w-8 p-0 ${isPinned ? 'text-primary' : 'text-muted-foreground'}`}
                               title={isPinned ? 'Unpin' : 'Pin to top'}
+                              aria-label={isPinned ? 'Unpin item' : 'Pin item'}
                             >
                               {isPinned ? (
                                 <PinOff className="h-3.5 w-3.5" />
@@ -309,6 +315,7 @@ export function SidebarCustomizer({
                                 }
                                 className="h-8 w-8 p-0"
                                 title="Remove from group"
+                                aria-label="Remove from group"
                               >
                                 <Trash2 className="h-3.5 w-3.5" />
                               </Button>
@@ -319,6 +326,9 @@ export function SidebarCustomizer({
                                 onClick={() => toggleItemVisibility(item.id)}
                                 className="h-8 w-8 p-0"
                                 title={isHidden ? 'Show' : 'Hide'}
+                                aria-label={
+                                  isHidden ? 'Show item' : 'Hide item'
+                                }
                               >
                                 {isHidden ? (
                                   <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
@@ -333,7 +343,7 @@ export function SidebarCustomizer({
                     })}
 
                     {group.isCustom && (
-                      <div className="flex gap-2 p-2 border rounded bg-muted/5">
+                      <div className="flex flex-col gap-2 rounded border bg-muted/5 p-2 sm:flex-row">
                         <CRDSelector
                           selectedCRD={selectedCRD?.name || ''}
                           onCRDChange={(crdName, kind) =>
@@ -370,7 +380,7 @@ export function SidebarCustomizer({
                   <FolderPlus className="h-4 w-4" />
                   {t('sidebar.createGroup', 'Create New CRD Group')}
                 </Label>
-                <div className="flex gap-2">
+                <div className="flex flex-col gap-2 sm:flex-row">
                   <Input
                     placeholder="Group name (e.g., CRDs)"
                     value={newGroupName}
@@ -384,6 +394,7 @@ export function SidebarCustomizer({
                   <Button
                     onClick={handleCreateGroup}
                     disabled={!newGroupName.trim()}
+                    aria-label="Create CRD group"
                   >
                     <Plus className="h-4 w-4" />
                   </Button>
@@ -393,7 +404,7 @@ export function SidebarCustomizer({
           </div>
         </div>
 
-        <div className="flex items-center justify-between p-6 pt-4 border-t bg-muted/10">
+        <div className="flex flex-col gap-2 border-t bg-muted/10 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-6 sm:pt-4">
           <Button variant="outline" onClick={resetConfig} className="gap-2">
             <RotateCcw className="h-4 w-4" />
             {t('sidebar.resetToDefault', 'Reset to Default')}
diff --git a/ui/src/components/simple-table.tsx b/ui/src/components/simple-table.tsx
index 15a25e3d..3c75b28f 100644
--- a/ui/src/components/simple-table.tsx
+++ b/ui/src/components/simple-table.tsx
@@ -153,14 +153,14 @@ export function SimpleTable<T>({
       </Table>
 
       {paginationConfig.enabled && data.length > 0 && (
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           {paginationConfig.showPageInfo && (
             <div className="text-sm text-muted-foreground">
               Showing {startIndex} - {endIndex} of {data.length} entries
             </div>
           )}
 
-          <div className="flex items-center space-x-2">
+          <div className="flex flex-wrap items-center gap-2">
             <Button
               variant="outline"
               size="sm"
@@ -170,7 +170,7 @@ export function SimpleTable<T>({
               Previous
             </Button>
 
-            <div className="flex items-center space-x-1">
+            <div className="flex flex-wrap items-center gap-1">
               {Array.from({ length: totalPages }, (_, i) => i + 1)
                 .filter((page) => {
                   // Show current page ±2 pages, plus first and last page
diff --git a/ui/src/components/ui/command.tsx b/ui/src/components/ui/command.tsx
index e5bd56bb..83080290 100644
--- a/ui/src/components/ui/command.tsx
+++ b/ui/src/components/ui/command.tsx
@@ -71,7 +71,7 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         {...props}
@@ -88,7 +88,7 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        "max-h-[min(60dvh,300px)] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className
       )}
       {...props}
diff --git a/ui/src/components/ui/dialog.tsx b/ui/src/components/ui/dialog.tsx
index d9ccec91..99075d70 100644
--- a/ui/src/components/ui/dialog.tsx
+++ b/ui/src/components/ui/dialog.tsx
@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-1rem)] max-w-[calc(100vw-1rem)] max-h-[calc(100dvh-1rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border p-4 shadow-lg duration-200 sm:w-full sm:max-w-lg sm:p-6",
           className
         )}
         {...props}
diff --git a/ui/src/components/ui/popover.tsx b/ui/src/components/ui/popover.tsx
index 6d51b6ce..578c8e07 100644
--- a/ui/src/components/ui/popover.tsx
+++ b/ui/src/components/ui/popover.tsx
@@ -28,7 +28,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 max-w-[calc(100vw-1rem)] origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className
         )}
         {...props}
diff --git a/ui/src/components/ui/sheet.tsx b/ui/src/components/ui/sheet.tsx
index 84649ad0..b362949d 100644
--- a/ui/src/components/ui/sheet.tsx
+++ b/ui/src/components/ui/sheet.tsx
@@ -60,9 +60,9 @@ function SheetContent({
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-dvh w-3/4 max-w-[calc(100vw-0.75rem)] border-l sm:max-w-sm",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-dvh w-3/4 max-w-[calc(100vw-0.75rem)] border-r sm:max-w-sm",
           side === "top" &&
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
diff --git a/ui/src/components/ui/sidebar.tsx b/ui/src/components/ui/sidebar.tsx
index 7eedd1b1..c3e9e2fa 100644
--- a/ui/src/components/ui/sidebar.tsx
+++ b/ui/src/components/ui/sidebar.tsx
@@ -140,7 +140,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-screen w-full overflow-hidden",
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-dvh w-full overflow-hidden",
             className
           )}
           {...props}
diff --git a/ui/src/pages/configmap-detail.tsx b/ui/src/pages/configmap-detail.tsx
index 38e441cc..e6eb5f76 100644
--- a/ui/src/pages/configmap-detail.tsx
+++ b/ui/src/pages/configmap-detail.tsx
@@ -95,15 +95,15 @@ export function ConfigMapDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{configmap.metadata!.name}</h1>
           <p className="text-muted-foreground">
             Namespace:{' '}
             <span className="font-medium">{configmap.metadata!.namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button variant="outline" size="sm" onClick={handleManualRefresh}>
             <IconRefresh className="w-4 h-4" />
             Refresh
diff --git a/ui/src/pages/cronjob-detail.tsx b/ui/src/pages/cronjob-detail.tsx
index 5c92a6b3..c0d68d4e 100644
--- a/ui/src/pages/cronjob-detail.tsx
+++ b/ui/src/pages/cronjob-detail.tsx
@@ -344,14 +344,14 @@ export function CronJobDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
           <p className="text-muted-foreground">
             Namespace: <span className="font-medium">{namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button variant="outline" size="sm" onClick={handleManualRefresh}>
             <IconRefresh className="w-4 h-4" />
             Refresh
@@ -406,7 +406,7 @@ export function CronJobDetail(props: { namespace: string; name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="space-y-1">
                         <Label className="text-xs text-muted-foreground uppercase tracking-wide">
                           Status
diff --git a/ui/src/pages/daemonset-detail.tsx b/ui/src/pages/daemonset-detail.tsx
index ecd33502..d3e0c63c 100644
--- a/ui/src/pages/daemonset-detail.tsx
+++ b/ui/src/pages/daemonset-detail.tsx
@@ -234,14 +234,14 @@ export function DaemonSetDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{metadata?.name}</h1>
           <p className="text-muted-foreground">
             Namespace: <span className="font-medium">{namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button
             disabled={isLoadingDaemonSet}
             variant="outline"
@@ -321,7 +321,7 @@ export function DaemonSetDetail(props: { namespace: string; name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
                           {isPending ? (
diff --git a/ui/src/pages/deployment-detail.tsx b/ui/src/pages/deployment-detail.tsx
index d3dafb08..984ac6b2 100644
--- a/ui/src/pages/deployment-detail.tsx
+++ b/ui/src/pages/deployment-detail.tsx
@@ -256,14 +256,14 @@ export function DeploymentDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
           <p className="text-muted-foreground">
             Namespace: <span className="font-medium">{namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button variant="outline" size="sm" onClick={handleRefresh}>
             <IconRefresh className="w-4 h-4" />
             Refresh
@@ -398,7 +398,7 @@ export function DeploymentDetail(props: { namespace: string; name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
                           <DeploymentStatusIcon
diff --git a/ui/src/pages/job-detail.tsx b/ui/src/pages/job-detail.tsx
index 926b2f93..9aed1679 100644
--- a/ui/src/pages/job-detail.tsx
+++ b/ui/src/pages/job-detail.tsx
@@ -159,14 +159,14 @@ export function JobDetail(props: { namespace: string; name: string }) {
 
   return (
     <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
           <p className="text-muted-foreground">
             Namespace: <span className="font-medium">{namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button variant="outline" size="sm" onClick={handleManualRefresh}>
             <IconRefresh className="w-4 h-4" />
             Refresh
@@ -199,7 +199,7 @@ export function JobDetail(props: { namespace: string; name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="space-y-1">
                         <Label className="text-xs text-muted-foreground uppercase tracking-wide">
                           Status
diff --git a/ui/src/pages/node-detail.tsx b/ui/src/pages/node-detail.tsx
index f24195fd..166f701f 100644
--- a/ui/src/pages/node-detail.tsx
+++ b/ui/src/pages/node-detail.tsx
@@ -230,11 +230,11 @@ export function NodeDetail(props: { name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button
             disabled={isLoading}
             variant="outline"
@@ -493,7 +493,7 @@ export function NodeDetail(props: { name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
                           {data.status?.conditions?.find(
diff --git a/ui/src/pages/pod-detail.tsx b/ui/src/pages/pod-detail.tsx
index d910e271..7358a3fe 100644
--- a/ui/src/pages/pod-detail.tsx
+++ b/ui/src/pages/pod-detail.tsx
@@ -191,14 +191,14 @@ export function PodDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
           <p className="text-muted-foreground">
             Namespace: <span className="font-medium">{namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button variant="outline" size="sm" onClick={handleManualRefresh}>
             <IconRefresh className="w-4 h-4" />
             Refresh
@@ -242,7 +242,7 @@ export function PodDetail(props: { namespace: string; name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
                           <PodStatusIcon
diff --git a/ui/src/pages/secret-detail.tsx b/ui/src/pages/secret-detail.tsx
index de3b1c69..b3b7063a 100644
--- a/ui/src/pages/secret-detail.tsx
+++ b/ui/src/pages/secret-detail.tsx
@@ -124,15 +124,15 @@ export function SecretDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{secret.metadata!.name}</h1>
           <p className="text-muted-foreground">
             Namespace:{' '}
             <span className="font-medium">{secret.metadata!.namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button variant="outline" size="sm" onClick={handleManualRefresh}>
             <IconRefresh className="w-4 h-4" />
             Refresh
diff --git a/ui/src/pages/service-detail.tsx b/ui/src/pages/service-detail.tsx
index 246b9a2f..b2635020 100644
--- a/ui/src/pages/service-detail.tsx
+++ b/ui/src/pages/service-detail.tsx
@@ -104,8 +104,8 @@ export function ServiceDetail(props: { name: string; namespace?: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
           {namespace && (
             <p className="text-muted-foreground">
@@ -113,7 +113,7 @@ export function ServiceDetail(props: { name: string; namespace?: string }) {
             </p>
           )}
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button
             disabled={isLoading}
             variant="outline"
diff --git a/ui/src/pages/simple-resource-detail.tsx b/ui/src/pages/simple-resource-detail.tsx
index 5292e44c..4fb45d72 100644
--- a/ui/src/pages/simple-resource-detail.tsx
+++ b/ui/src/pages/simple-resource-detail.tsx
@@ -101,8 +101,8 @@ export function SimpleResourceDetail<T extends ResourceType>(props: {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{name}</h1>
           {namespace && (
             <p className="text-muted-foreground">
@@ -110,7 +110,7 @@ export function SimpleResourceDetail<T extends ResourceType>(props: {
             </p>
           )}
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button
             disabled={isLoading}
             variant="outline"
diff --git a/ui/src/pages/statefulset-detail.tsx b/ui/src/pages/statefulset-detail.tsx
index ee64e4a9..8c1a400c 100644
--- a/ui/src/pages/statefulset-detail.tsx
+++ b/ui/src/pages/statefulset-detail.tsx
@@ -274,14 +274,14 @@ export function StatefulSetDetail(props: { namespace: string; name: string }) {
   return (
     <div className="space-y-2">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
           <h1 className="text-lg font-bold">{metadata?.name}</h1>
           <p className="text-muted-foreground">
             Namespace: <span className="font-medium">{namespace}</span>
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-wrap gap-2 md:w-auto md:justify-end">
           <Button
             disabled={isLoadingStatefulSet}
             variant="outline"
@@ -403,7 +403,7 @@ export function StatefulSetDetail(props: { namespace: string; name: string }) {
                     <CardTitle>Status Overview</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4">
                       <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
                           {isPending ? (