From 1ebddba6e36742cb6d423e22a35e05b033e20fd5 Mon Sep 17 00:00:00 2001
From: veguAI <152010387+vegu-ai-tools@users.noreply.github.com>
Date: Mon, 20 Jul 2026 13:04:22 +0300
Subject: [PATCH] UX: smaller, viewport-responsive Quick Load recent scene
 cards (#117) (#119)

* ux: make quick-load recent scene cards smaller and responsive to viewport (#117)

* ux: fit a full 10-entry quick-load list in one row at the landing container max width
---
 CHANGELOG.yaml                                |  1 +
 .../src/components/IntroRecentScenes.vue      | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.yaml b/CHANGELOG.yaml
index c2e1b693..3c8c57a8 100644
--- a/CHANGELOG.yaml
+++ b/CHANGELOG.yaml
@@ -23,6 +23,7 @@
   - "Track State: The World State scene tool menu's two separate 'Add tracked world state' and 'Add tracked character state' actions are now a single 'Track state' action. The modal itself lets you choose the target — the world or a specific character — before describing what to track, and the context attachment default and 'Require character active' option adapt to the choice."
   - "OpenRouter Client: Added a Parameters config tab with individual toggles for `temperature`, `top_p`, `top_k`, `min_p`, `frequency_penalty`, `presence_penalty`, and `repetition_penalty`. Toggling a parameter off omits it from the request entirely, for model providers that hard-error on parameters they don't support for the selected model — some, for example, only accept a `frequency_penalty` of exactly 0 for certain models. All default to on."
   - "Pi Bridge Client: The Docker image now ships with pi preinstalled, and pi's configuration directory (models.json, auth.json) is mounted from ./pi next to the compose file, so the client works in Docker out of the box."
+  - "Scene Browser Landing Page: The Quick Load recent-scene cards are smaller and scale with the viewport width, so a full row of recents no longer pushes the Scene Library far down the page."
   fixes:
   - "Pi Bridge Client: On Windows the client could not launch pi at all — the startup model fetch logged an unhelpful '[WinError 2] The system cannot find the file specified' and generations failed the same way, because pi installed via npm is a pi.cmd shim that Windows only executes by its full path. The pi executable is now resolved to its full path before spawning, and if a launch still fails the error names the executable that could not be run. A missing pi install is also no longer reported at startup — it only surfaces on a configured Pi Bridge client."
   - "Client Status: A single failed status check (e.g. a brief connection timeout to a busy local KoboldCpp) no longer flaps a connected client to 'Could not connect' for a few seconds — the client is only marked disconnected after consecutive status failures."
diff --git a/talemate_frontend/src/components/IntroRecentScenes.vue b/talemate_frontend/src/components/IntroRecentScenes.vue
index 89cfff58..b7ffb9a0 100644
--- a/talemate_frontend/src/components/IntroRecentScenes.vue
+++ b/talemate_frontend/src/components/IntroRecentScenes.vue
@@ -227,7 +227,6 @@ export default {
     position: relative;
     width: 100%;
     aspect-ratio: 3 / 4;
-    min-height: clamp(200px, 25vw, 275px);
     background-color: transparent;
     background-image: url('/src/assets/logo-13.1-backdrop.png');
     background-repeat: no-repeat;
@@ -251,18 +250,21 @@ export default {
     background-position: top center !important;
 }
 
-/* flud flex tiles with fixed width */
+/* fluid grid tiles - card width scales with viewport; 145px min fits a full
+   10-entry recents list in a single row at the landing container's max width */
 .tiles {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: left;
-    overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
+    gap: 12px;
 }
 
-.tile {
-    flex: 0 0 275px;
-    margin: 10px;
-    max-width: 275px;
+.tile :deep(.v-card-title) {
+    font-size: 0.9rem;
+    padding-right: 40px;
+}
+
+.tile :deep(.v-card-subtitle) {
+    font-size: 0.75rem;
 }
 
 .v-card:disabled {