From cfbd0bdffa1a8f4b937da06bb3a7c16fe4233d82 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Wed, 3 Dec 2025 16:41:45 +0000
Subject: [PATCH] Show view instance button only on small screen

---
 .../src/components/instance-welcome-view.tsx  | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/components/instance-welcome-view.tsx b/packages/ui/src/components/instance-welcome-view.tsx
index f3fa3f89..d3398b18 100644
--- a/packages/ui/src/components/instance-welcome-view.tsx
+++ b/packages/ui/src/components/instance-welcome-view.tsx
@@ -215,9 +215,11 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                 </div>
                 <p class="panel-empty-state-title">No Previous Sessions</p>
                 <p class="panel-empty-state-description">Create a new session below to get started</p>
-                <button type="button" class="button-tertiary mt-4 lg:hidden" onClick={openInstanceInfoOverlay}>
-                  View Instance Info
-                </button>
+                <Show when={!showInstanceInfoOverlay()}>
+                  <button type="button" class="button-tertiary mt-4 lg:hidden" onClick={openInstanceInfoOverlay}>
+                    View Instance Info
+                  </button>
+                </Show>
               </div>
             }
           >
@@ -230,13 +232,15 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                       {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
                     </p>
                   </div>
-                  <button
-                    type="button"
-                    class="button-tertiary lg:hidden flex-shrink-0"
-                    onClick={openInstanceInfoOverlay}
-                  >
-                    View Instance Info
-                  </button>
+                  <Show when={!showInstanceInfoOverlay()}>
+                    <button
+                      type="button"
+                      class="button-tertiary lg:hidden flex-shrink-0"
+                      onClick={openInstanceInfoOverlay}
+                    >
+                      View Instance Info
+                    </button>
+                  </Show>
                 </div>
               </div>
               <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto">
@@ -334,20 +338,22 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
 
       <Show when={showInstanceInfoOverlay()}>
         <div
-          class="fixed inset-0 z-40 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm lg:hidden"
+          class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
           onClick={closeInstanceInfoOverlay}
         >
-          <div
-            class="w-full max-w-md space-y-3"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <div class="flex justify-end">
-              <button type="button" class="button-tertiary" onClick={closeInstanceInfoOverlay}>
-                Close
-              </button>
-            </div>
-            <div class="max-h-[80vh] overflow-y-auto pr-1">
-              <InstanceInfo instance={props.instance} />
+          <div class="flex min-h-full items-start justify-center p-4 overflow-y-auto">
+            <div
+              class="w-full max-w-md space-y-3"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div class="flex justify-end">
+                <button type="button" class="button-tertiary" onClick={closeInstanceInfoOverlay}>
+                  Close
+                </button>
+              </div>
+              <div class="max-h-[85vh] overflow-y-auto pr-1">
+                <InstanceInfo instance={props.instance} />
+              </div>
             </div>
           </div>
         </div>