fix(index): improve mobile dashboard layout

- Move System History action from the 3X-UI card into the System Load
  card's #extra slot so the chart opener sits next to live load values.
- Fix card widths on mobile by switching :sm="24" to :xs="24"; the sm
  breakpoint only kicks in at >=576px, so phones in portrait had no
  span set and cards shrank to content width.
- Restore vertical spacing between cards (vertical gutter was 0 on
  mobile) and reduce content padding on small screens, reserving 64px
  top so the sidebar drawer handle no longer overlaps the StatusCard.
- Wrap the 3X-UI link tags in a flex container so version/Telegram/docs
  chips wrap with consistent spacing on narrow widths.
- Make Sparkline's viewBox track its actual rendered pixel width via
  ResizeObserver so X-axis time labels stop being squashed horizontally
  by preserveAspectRatio="none" on narrow containers.
- Make the SystemHistory modal width responsive (95vw on mobile, was a
  fixed 900px that overflowed phone viewports).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/index/StatusCard.vue

@@ -27,7 +27,7 @@ const trailColor = 'rgba(128, 128, 128, 0.25)';
   <a-card hoverable>
     <a-row :gutter="[0, isMobile ? 16 : 0]">
       <!-- CPU + Memory -->
-      <a-col :sm="24" :md="12">
+      <a-col :xs="24" :md="12">
         <a-row>
           <a-col :span="12" class="text-center">
             <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
@@ -57,7 +57,7 @@ const trailColor = 'rgba(128, 128, 128, 0.25)';
       </a-col>
 
       <!-- Swap + Disk -->
-      <a-col :sm="24" :md="12">
+      <a-col :xs="24" :md="12">
         <a-row>
           <a-col :span="12" class="text-center">
             <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"