From 6ee4672ff76db596a508531d582ea62cee5de558 Mon Sep 17 00:00:00 2001
From: SuperKali <hello@superkali.me>
Date: Tue, 20 Jan 2026 22:52:51 +0100
Subject: [PATCH] fix: reduce board image scale and improve CI cache strategy

Fixes #84

Board images in the flash progress screen were displaying too large (200px
effective size) causing overflow and invading the text area. This made the
UI appear cramped and unprofessional.

CSS Changes:
- Reduce transform scale from 2.0 to 1.5 (150px effective size)
- Increase flash-header gap from 18px to 20px for better spacing
- Increase flash-header padding from 18px to 20px 24px (horizontal)
- Update responsive breakpoints proportionally for mobile

CI/CD Changes:
- Remove duplicate npm cache from setup-node (using explicit cache action)
- Simplify cache keys by removing architecture-specific components
- Add versioned shared keys for Rust workspace cache
- Improve cache hit rate across different runners
---
 .github/workflows/maintenance-pr-check.yml | 13 +++++--------
 src/styles/flash.css                       |  6 +++---
 src/styles/responsive.css                  |  4 ++--
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/maintenance-pr-check.yml b/.github/workflows/maintenance-pr-check.yml
index 3d68d2c..fa6f464 100644
--- a/.github/workflows/maintenance-pr-check.yml
+++ b/.github/workflows/maintenance-pr-check.yml
@@ -47,7 +47,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "npm"
 
       - name: Cache node_modules
         uses: actions/cache@v4
@@ -91,7 +90,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "npm"
 
       - name: Cache node_modules
         uses: actions/cache@v4
@@ -117,6 +115,7 @@ jobs:
         with:
           workspaces: "src-tauri -> target"
           cache-on-failure: true
+          shared-key: "v1-linux-x64"
 
       - name: Check formatting
         working-directory: src-tauri
@@ -211,15 +210,14 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "npm"
 
       - name: Cache node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-${{ runner.arch }}-node-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-${{ runner.arch }}-node-
+            ${{ runner.os }}-node-
 
       - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
@@ -229,13 +227,13 @@ jobs:
         with:
           workspaces: "src-tauri -> target"
           cache-on-failure: true
-          shared-key: ${{ matrix.platform }}
+          shared-key: "v1-${{ matrix.platform }}"
 
       - name: Cache Tauri CLI
         uses: actions/cache@v4
         with:
           path: ~/.cargo/bin
-          key: cargo-bin-${{ runner.os }}-${{ runner.arch }}-tauri-${{ env.TAURI_CLI_VERSION }}
+          key: tauri-cli-${{ matrix.platform }}-${{ env.TAURI_CLI_VERSION }}
 
       - name: Install dependencies
         run: npm ci
@@ -391,7 +389,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "npm"
 
       - name: Cache node_modules
         uses: actions/cache@v4
diff --git a/src/styles/flash.css b/src/styles/flash.css
index 85ebe69..1389e94 100644
--- a/src/styles/flash.css
+++ b/src/styles/flash.css
@@ -17,8 +17,8 @@
 .flash-header {
   display: flex;
   align-items: center;
-  gap: 18px;
-  padding: 18px;
+  gap: 20px;
+  padding: 20px 24px;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 10px;
@@ -31,7 +31,7 @@
   height: 100px;
   object-fit: contain;
   flex-shrink: 0;
-  transform: scale(2);
+  transform: scale(1.5);
 }
 
 .flash-custom-image-icon {
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
index 985a4be..ffa57cf 100644
--- a/src/styles/responsive.css
+++ b/src/styles/responsive.css
@@ -42,8 +42,8 @@
   }
 
   .flash-header {
-    gap: 14px;
-    padding: 14px;
+    gap: 16px;
+    padding: 16px 20px;
   }
 
   .flash-board-image {