ui/app_phone.css

/* Phone / narrow layout skin — activated when html[data-ui-skin="phone"]
   Desktop shell is removed from the DOM by boot.js so IDs stay unique. */

/* Do not lock zoom: avoid touch-action/manipulation globals and maximum-scale tricks.
   overflow-x only on shell, not html — html overflow can interfere with pinch-zoom on some browsers. */
html[data-ui-skin="phone"] .gradio-container {
  overflow-x: clip;
}
html[data-ui-skin="phone"] body {
  /* allow page zoom; keep horizontal spill contained without trapping gestures */
  overflow-x: visible;
}

html[data-ui-skin="phone"] .app-shell-phone,
html[data-ui-skin="phone"] #skin-phone .app-shell {
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  min-height: 100dvh;
}

/* App chrome header (logo/GitHub) is omitted from shell_phone.html */

/* Single-column stack */
html[data-ui-skin="phone"] .phone-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  /* clear fixed Edit bar so last fields stay reachable */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
html[data-ui-skin="phone"] .phone-block {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #27272a;
  background: #18181b;
}

/* Upload: toolbar as section header + full-height gallery */
html[data-ui-skin="phone"] .phone-upload .app-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 8px 12px !important;
  border-right: none !important;
  border-bottom: 1px solid #27272a;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
/* Keep upload block size; only shrink the empty-state placeholder so it doesn’t scroll inside */
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone {
  width: 100% !important;
  min-height: 168px !important;
  height: min(38vw, 220px) !important;
  max-height: 240px !important;
  aspect-ratio: auto !important;
  position: relative;
  background: #09090b;
  overflow: hidden !important;
}
/* Placeholder scale ~midway between full desktop and the previous tiny 0.52 */
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone .upload-prompt-modern {
  transform: translate(-50%, -50%) scale(0.72);
  transform-origin: center center;
  max-width: 92%;
  pointer-events: none;
}
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone .upload-click-area {
  pointer-events: auto;
  padding: 12px 16px !important;
  gap: 4px;
  border-radius: 12px;
}
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone .upload-click-area svg {
  width: 56px !important;
  height: 56px !important;
}
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone .upload-main-text {
  font-size: 13px !important;
  margin-top: 4px !important;
}
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone .upload-sub-text {
  font-size: 11px !important;
  max-width: 14rem !important;
  line-height: 1.35 !important;
  padding: 0 6px;
}
/* Gallery with images: allow internal scroll without changing the outer block size */
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone:has(.image-gallery-grid[style*="display: grid"]),
html[data-ui-skin="phone"] .phone-upload #gallery-drop-zone:has(.image-gallery-grid:not([style*="display: none"])) {
  overflow: auto !important;
}

/* Output right after upload */
html[data-ui-skin="phone"] .phone-output .output-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #27272a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
/* Same footprint as upload block for side-by-side compare when scrolling */
html[data-ui-skin="phone"] .phone-output .output-frame {
  width: 100% !important;
  flex: none !important;
  min-height: 168px !important;
  height: min(38vw, 220px) !important;
  max-height: 240px !important;
  aspect-ratio: auto !important;
  display: flex;
  flex-direction: column;
  background: #09090b;
  overflow: hidden;
}
html[data-ui-skin="phone"] .phone-output .output-frame .out-body {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-ui-skin="phone"] .phone-output .out-body img,
html[data-ui-skin="phone"] .phone-output .modern-out-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Quick prompts — whole block capped; open panels scroll inside so N open tables
   don’t keep growing the page past the fixed Edit bar */
html[data-ui-skin="phone"] .phone-prompts {
  max-height: min(42vh, 320px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-ui-skin="phone"] .phone-prompts .prompts-toolbar {
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #18181b;
}
html[data-ui-skin="phone"] .phone-prompts .chip-panel {
  width: 100%;
  border-top: 1px solid #27272a;
  flex: 0 0 auto;
}
html[data-ui-skin="phone"] .phone-prompts .chip-panel-body {
  max-height: min(22vh, 160px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prompt — 16px inputs reduce iOS focus zoom */
html[data-ui-skin="phone"] .phone-prompt .panel-card {
  border: none !important;
  background: transparent !important;
}
html[data-ui-skin="phone"] .phone-prompt .panel-card-body {
  padding: 12px 14px !important;
}
html[data-ui-skin="phone"] .phone-prompt .modern-textarea {
  min-height: 110px;
  font-size: 16px !important;
}

/* Menus: pack + aspect + size */
html[data-ui-skin="phone"] .phone-menus {
  padding: 0 0 4px;
}
html[data-ui-skin="phone"] .phone-menus .prompt-pack-menu,
html[data-ui-skin="phone"] .phone-menus .lora-selector-card {
  border: none !important;
  border-bottom: 1px solid #27272a !important;
  background: transparent !important;
  margin: 0 !important;
}
html[data-ui-skin="phone"] .phone-menus .prompt-pack-menu,
html[data-ui-skin="phone"] .phone-menus .lora-selector-body {
  padding: 12px 14px !important;
}
html[data-ui-skin="phone"] .phone-menus .lora-native-select,
html[data-ui-skin="phone"] .phone-lora .lora-native-select {
  font-size: 16px !important; /* iOS zoom guard */
}

/* LoRA */
html[data-ui-skin="phone"] .phone-lora {
  padding: 12px 14px 16px;
}
html[data-ui-skin="phone"] .phone-lora .left-stack {
  border-top: none;
  padding: 0;
}
/* Demos hidden until a LoRA is selected (class toggled in lora_demo.js) */
html[data-ui-skin="phone"]:not(.has-lora-selected) #lora-demo-row,
html[data-ui-skin="phone"]:not(.has-lora-selected) #lora-demo-status,
html[data-ui-skin="phone"]:not(.has-lora-selected) .lora-demo-caption {
  display: none !important;
}

/* Advanced + run */
html[data-ui-skin="phone"] .phone-advanced .settings-group {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
/*
 * Fixed Edit bar. On HF, transform/filter on Gradio ancestors break position:fixed
 * (bar sticks to a nested box, not the screen). boot.js ports .phone-run to
 * document.body (.phone-run--ported) so fixed = real viewport — same as embeds.
 */
html[data-ui-skin="phone"] .phone-run,
html[data-ui-skin="phone"] body > .phone-run,
body > .phone-run.phone-run--ported {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 2147483000 !important; /* above typical HF/Gradio chrome */
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: rgba(24, 24, 27, 0.97) !important;
  border-top: 1px solid #27272a !important;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}
html[data-ui-skin="phone"] .phone-run .run-btn-wrap {
  padding: 0 !important;
}
html[data-ui-skin="phone"] .phone-run .btn-run {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}
html[data-ui-skin="phone"] .phone-footer {
  padding-bottom: 8px;
}

html[data-ui-skin="phone"] .phone-footer .exp-note {
  padding: 10px 14px;
  font-size: 11px;
}
html[data-ui-skin="phone"] .phone-footer .app-statusbar {
  padding: 6px 12px;
  height: auto;
  min-height: 34px;
  flex-wrap: wrap;
}

@supports (padding: env(safe-area-inset-bottom)) {
  html[data-ui-skin="phone"] .phone-run,
  html[data-ui-skin="phone"] body > .phone-run,
  body > .phone-run.phone-run--ported {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* Hide unused skin before boot removes it (avoid flash of both) */
#skin-phone[hidden] { display: none !important; }
#skin-desktop[hidden] { display: none !important; }