From 8d745ad96edcdff0a1bd2b70d0ff122c78f7ef2d Mon Sep 17 00:00:00 2001
From: Iqbal <iqbaldev3@gmail.com>
Date: Thu, 29 Oct 2026 12:21:33 +0700
Subject: [PATCH] Fit the knowledge graph in the viewport on short screens

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/styles/theme.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/theme.css b/src/styles/theme.css
index 007a733..f843e21 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -305,7 +305,7 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
 @keyframes live-pulse{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
 
 .graph-stage{--g-sources:#6ce9a6;--g-made:#fde272;--g-working:#c3b5fd;
-  position:relative;min-height:640px;border-radius:22px;overflow:hidden;color:#e4e7ec;
+  position:relative;height:640px;max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px);min-height:440px;border-radius:22px;overflow:hidden;color:#e4e7ec;
   background:radial-gradient(ellipse at 45% 50%,#0f2a4d 0%,#0a1628 55%,#060d1a 100%);box-shadow:0 24px 60px -28px rgba(16,24,40,.6)}
 .graph-svg{position:absolute;inset:0;width:calc(100% - 300px);height:100%;display:block}
 .graph-loading{position:absolute;inset:0 300px 0 0;display:grid;place-items:center;color:#98a2b3;font-size:13px}
@@ -378,10 +378,10 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
 .graph-fullscreen{position:absolute;top:16px;right:316px;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(10,22,40,.6);backdrop-filter:blur(8px);color:#d0d5dd;cursor:pointer;transition:background .15s,color .15s}
 .graph-fullscreen:hover{background:rgba(46,144,250,.25);color:#fff}
 .graph-fullscreen svg{width:16px;height:16px}
-.graph-stage.full{border-radius:0;min-height:0;height:100vh;height:100dvh;box-shadow:none}
+.graph-stage.full{border-radius:0;min-height:0;max-height:none;height:100vh;height:100dvh;box-shadow:none}
 .graph-stage.pinned{position:fixed;inset:0;z-index:50}
 @media(max-width:900px){
-  .graph-stage{min-height:0;display:flex;flex-direction:column}
+  .graph-stage{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column}
   .graph-stage.full{overflow:auto}
   .graph-fullscreen{right:16px}
   .graph-svg{position:relative;width:100%;height:auto;aspect-ratio:1000/640}