fix(devops): responsive UI + overflow guards in DevopsPanel

@bytelyst/devops 0.1.3:
- Wrap tables in scrollable container (overflow-x: auto) so long values
  never push the panel wider than its parent.
- table-layout: fixed + min-width on key column prevents column blow-out.
- Code/value cells use overflow-wrap: anywhere + word-break: break-word
  so long commit SHAs and Docker image strings wrap.
- pre block uses pre-wrap + break-word for raw JSON.
- Header actions wrap on narrow viewports.
- Tabs row scrolls horizontally rather than wrapping awkwardly.
- root container: maxWidth 100% + minWidth 0 to play nicely with flex parents.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

packages/devops/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytelyst/devops",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Runtime devops metadata (build info, uptime, health) — server collector + React UI",
   "exports": {

packages/devops/src/ui.tsx

@@ -231,6 +231,7 @@ interface KvRow {
 
 function KvTable({ rows }: { rows: KvRow[] }): React.ReactElement {
   return (
+    <div style={styles.tableWrap}>
       <table style={styles.table}>
         <tbody>
           {rows.map((r, i) => (
@@ -243,6 +244,7 @@ function KvTable({ rows }: { rows: KvRow[] }): React.ReactElement {
           ))}
         </tbody>
       </table>
+    </div>
   );
 }
 
@@ -252,6 +254,7 @@ function DependenciesTable({
   deps: NonNullable<DevopsInfo['dependencies']>;
 }): React.ReactElement {
   return (
+    <div style={styles.tableWrap}>
       <table style={styles.table}>
         <thead>
           <tr style={styles.tr}>
@@ -276,6 +279,7 @@ function DependenciesTable({
           ))}
         </tbody>
       </table>
+    </div>
   );
 }
 
@@ -289,7 +293,7 @@ function formatTimestamp(iso: string): string {
 }
 
 const styles: Record<string, React.CSSProperties> = {
-  root: { display: 'flex', flexDirection: 'column', gap: 12 },
+  root: { display: 'flex', flexDirection: 'column', gap: 12, maxWidth: '100%', minWidth: 0 },
   header: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -300,7 +304,7 @@ const styles: Record<string, React.CSSProperties> = {
   title: { fontSize: 16, fontWeight: 600, color: 'var(--foreground, inherit)' },
   subtitle: { fontSize: 13, color: 'var(--muted-foreground, #6b7280)', marginTop: 4 },
   muted: { fontSize: 12, color: 'var(--muted-foreground, #6b7280)' },
-  headerActions: { display: 'flex', gap: 8, alignItems: 'center' },
+  headerActions: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' },
   sourceToggle: {
     display: 'inline-flex',
     border: '1px solid var(--border, #e5e7eb)',
@@ -332,6 +336,8 @@ const styles: Record<string, React.CSSProperties> = {
     display: 'flex',
     gap: 2,
     borderBottom: '1px solid var(--border, #e5e7eb)',
+    overflowX: 'auto',
+    whiteSpace: 'nowrap',
   },
   tab: {
     padding: '8px 14px',
@@ -341,14 +347,21 @@ const styles: Record<string, React.CSSProperties> = {
     borderBottom: '2px solid transparent',
     cursor: 'pointer',
     color: 'var(--muted-foreground, #6b7280)',
+    flexShrink: 0,
   },
   tabActive: {
     color: 'var(--foreground, inherit)',
     borderBottomColor: 'var(--accent, #2563eb)',
     fontWeight: 500,
   },
-  panel: { paddingTop: 8 },
+  panel: { paddingTop: 8, minWidth: 0 },
-  table: { width: '100%', borderCollapse: 'collapse', fontSize: 13 },
+  tableWrap: {
+    width: '100%',
+    overflowX: 'auto',
+    overflowY: 'visible',
+    WebkitOverflowScrolling: 'touch',
+  },
+  table: { width: '100%', borderCollapse: 'collapse', fontSize: 13, tableLayout: 'fixed' },
   tr: { borderBottom: '1px solid var(--border, #f3f4f6)' },
   th: {
     textAlign: 'left',
@@ -357,14 +370,22 @@ const styles: Record<string, React.CSSProperties> = {
     padding: '8px 12px 8px 0',
     verticalAlign: 'top',
     width: '30%',
+    minWidth: 120,
+  },
+  td: {
+    padding: '8px 0',
+    verticalAlign: 'top',
+    color: 'var(--foreground, inherit)',
+    overflowWrap: 'anywhere',
+    wordBreak: 'break-word',
   },
-  td: { padding: '8px 0', verticalAlign: 'top', color: 'var(--foreground, inherit)' },
   code: {
     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
     fontSize: 12,
     background: 'color-mix(in oklab, var(--foreground, #000) 5%, transparent)',
     padding: '2px 6px',
     borderRadius: 4,
+    wordBreak: 'break-all',
   },
   pre: {
     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
@@ -374,6 +395,8 @@ const styles: Record<string, React.CSSProperties> = {
     borderRadius: 6,
     overflow: 'auto',
     maxHeight: 480,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
   },
   badge: {
     display: 'inline-block',