Fix visual glitch where the file picker container overlapped with the aladin-control-component.

Author: ljfp

web/styles.css

@@ -2,6 +2,10 @@
   box-sizing: border-box;
 }
 
+:root {
+  --layout-top-offset: calc(env(safe-area-inset-top, 0px) + 22rem);
+}
+
 html,
 body {
   height: 100%;
@@ -24,53 +28,56 @@ body {
 
 .hud {
   position: fixed;
-  top: 1.25rem;
+  top: var(--layout-top-offset);
   left: 1.25rem;
-  width: min(420px, calc(100vw - 2.5rem));
+  width: min(380px, calc(100vw - 2.5rem));
+  max-height: calc(100vh - 2.5rem);
   background: rgba(6, 11, 27, 0.78);
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 1rem;
-  padding: 1.25rem;
+  padding: 0.85rem;
   display: flex;
   flex-direction: column;
-  gap: 0.9rem;
+  gap: 0.6rem;
   box-shadow: 0 20px 40px rgba(4, 10, 24, 0.35);
   pointer-events: auto;
   backdrop-filter: blur(14px);
-  z-index: 10;
+  z-index: 5;
+  overflow-y: auto;
 }
 
 .title {
   margin: 0;
-  font-size: 0.95rem;
+  font-size: 0.88rem;
   text-transform: uppercase;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.1em;
   color: #e2e8f0;
+  line-height: 1.2;
 }
 
 .status {
   margin: 0;
-  font-size: 0.85rem;
-  line-height: 1.4;
+  font-size: 0.8rem;
+  line-height: 1.3;
   color: rgba(226, 232, 240, 0.88);
 }
 
 .controls {
   display: grid;
-  gap: 0.6rem;
+  gap: 0.4rem;
 }
 
 .file-picker {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.65rem 0.95rem;
-  border-radius: 0.85rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 0.7rem;
   border: 1px dashed rgba(148, 163, 184, 0.35);
   background: rgba(148, 163, 184, 0.08);
   color: inherit;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   cursor: pointer;
   transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
 }
@@ -95,12 +102,12 @@ body {
 .url-loader input {
   flex: 1 1 auto;
   min-width: 0;
-  padding: 0.55rem 0.75rem;
-  border-radius: 0.75rem;
+  padding: 0.45rem 0.65rem;
+  border-radius: 0.7rem;
   border: 1px solid rgba(148, 163, 184, 0.35);
   background: rgba(15, 23, 42, 0.65);
   color: inherit;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
 }
 
 .url-loader input:focus {
@@ -109,12 +116,12 @@ body {
 }
 
 button {
-  padding: 0.55rem 0.95rem;
-  border-radius: 0.8rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 0.7rem;
   border: 1px solid rgba(148, 163, 184, 0.35);
   background: rgba(94, 234, 212, 0.12);
   color: inherit;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
 }
@@ -138,20 +145,21 @@ button:disabled {
 .samples {
   display: flex;
   flex-direction: column;
-  gap: 0.45rem;
+  gap: 0.35rem;
 }
 
 .samples-label {
   text-transform: uppercase;
-  font-size: 0.7rem;
-  letter-spacing: 0.16em;
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
   color: rgba(148, 163, 184, 0.8);
+  line-height: 1.2;
 }
 
 .sample-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .sample-buttons button {
@@ -166,8 +174,8 @@ button:disabled {
 
 .notice {
   margin: 0;
-  font-size: 0.78rem;
-  line-height: 1.4;
+  font-size: 0.75rem;
+  line-height: 1.3;
   color: rgba(226, 232, 240, 0.72);
 }