@grifhinz/logics-manager 2.8.0 → 2.9.0

package/clients/viewer/viewer.css

@@ -283,7 +283,9 @@
   z-index: 60;
   display: grid;
   gap: 12px;
-  min-width: 220px;
+  width: max-content;
+  min-width: 260px;
+  max-width: min(360px, calc(100vw - 24px));
   padding: 10px;
   border: 1px solid var(--vscode-panel-border, #333333);
   border-radius: 6px;
@@ -733,101 +735,681 @@
   padding: 12px;
 }
 
-.viewer-ci__heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 10px;
+.viewer-ci__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.viewer-ci__heading--actions {
+  align-items: flex-start;
+}
+
+.viewer-ci__heading--actions > div {
+  display: grid;
+  gap: 4px;
+}
+
+.viewer-ci__heading h2 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.viewer-ci__heading span {
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  font-size: 12px;
+}
+
+.viewer-ci__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.viewer-ci__list,
+.viewer-ci__jobs {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.viewer-ci__row,
+.viewer-ci__job,
+.viewer-ci__empty {
+  min-width: 0;
+  border: 1px solid color-mix(in srgb, var(--vscode-panel-border, #333333) 74%, transparent);
+  border-radius: 6px;
+  padding: 8px 9px;
+  background: var(--vscode-sideBar-background, #252526);
+  font-size: 12px;
+}
+
+.viewer-ci__row,
+.viewer-ci__job,
+.viewer-ci__job a {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.viewer-ci__job a {
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+}
+
+.viewer-ci__row span,
+.viewer-ci__job span {
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+}
+
+.viewer-ci__row strong,
+.viewer-ci__job strong {
+  min-width: 0;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.viewer-ci__link {
+  display: inline-flex;
+  margin-top: 10px;
+  color: var(--vscode-textLink-foreground, #4ea1ff);
+  font-size: 12px;
+}
+
+.viewer-ci__state,
+.viewer-ci__empty {
+  color: var(--vscode-descriptionForeground, #9da5b4);
+}
+
+.viewer-workspace {
+  display: grid;
+  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.viewer-workspace__tree,
+.viewer-workspace__preview {
+  min-width: 0;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-editorWidget-background, #202020);
+}
+
+.viewer-workspace__preview {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  padding: 12px;
+}
+
+.viewer-workspace__tree-header {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--vscode-panel-border, #333333);
+  background: var(--vscode-editorWidget-background, #202020);
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.viewer-workspace__breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.viewer-workspace__crumb {
+  border: 0;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  font: inherit;
+  font-size: 11px;
+  padding: 2px 4px;
+  border-radius: 3px;
+  cursor: pointer;
+  max-width: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer-workspace__crumb:hover {
+  color: var(--vscode-foreground, #d4d4d4);
+  background: var(--vscode-list-hoverBackground, rgb(255 255 255 / 6%));
+}
+
+.viewer-workspace__crumb:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, #007fd4);
+  outline-offset: 0;
+}
+
+.viewer-workspace__crumb.is-current {
+  color: var(--vscode-foreground, #d4d4d4);
+  font-weight: 600;
+  cursor: default;
+}
+
+.viewer-workspace__crumb-sep {
+  color: var(--vscode-descriptionForeground, #888888);
+  font-size: 11px;
+  user-select: none;
+}
+
+.viewer-workspace__tree-list {
+  display: grid;
+  gap: 1px;
+  padding: 4px;
+}
+
+.viewer-workspace__item {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 6px;
+  align-items: center;
+  border: 0;
+  border-radius: 4px;
+  padding: 4px 6px;
+  background: transparent;
+  color: var(--vscode-foreground, #d4d4d4);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  cursor: pointer;
+}
+
+.viewer-workspace__item:hover {
+  background: var(--vscode-list-hoverBackground, rgb(255 255 255 / 6%));
+}
+
+.viewer-workspace__item:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, #007fd4);
+  outline-offset: -1px;
+  background: var(--vscode-list-focusBackground, rgb(255 255 255 / 4%));
+}
+
+.viewer-workspace__item.is-selected {
+  background: var(--vscode-list-activeSelectionBackground, #094771);
+  color: var(--vscode-list-activeSelectionForeground, #ffffff);
+}
+
+.viewer-workspace__item.is-selected .viewer-workspace__item-icon {
+  color: inherit;
+}
+
+.viewer-workspace__item.is-muted {
+  color: var(--vscode-descriptionForeground, #888888);
+  cursor: default;
+}
+
+.viewer-workspace__item--up {
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  font-style: italic;
+}
+
+.viewer-workspace__item-icon {
+  color: var(--vscode-symbolIcon-folderForeground, #c5c5c5);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+.viewer-workspace__item--file .viewer-workspace__item-icon {
+  color: var(--vscode-symbolIcon-fileForeground, #9cdcfe);
+}
+
+.viewer-workspace__item.is-muted .viewer-workspace__item-icon {
+  color: var(--vscode-descriptionForeground, #666666);
+}
+
+.viewer-workspace__item-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.viewer-workspace__placeholder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  font-size: 12px;
+  border: 1px dashed var(--vscode-panel-border, #333333);
+  border-radius: 4px;
+  margin: 6px;
+}
+
+.viewer-workspace__placeholder--warn {
+  border-color: var(--vscode-editorWarning-foreground, #cca700);
+  color: var(--vscode-editorWarning-foreground, #cca700);
+}
+
+.viewer-workspace__placeholder--unavailable {
+  border-color: var(--vscode-editorError-foreground, #f48771);
+  color: var(--vscode-editorError-foreground, #f48771);
+}
+
+.viewer-workspace__placeholder-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 6%);
+  font-size: 11px;
+}
+
+.viewer-workspace__item-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer-workspace__preview-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.viewer-workspace__preview-header > div {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.viewer-workspace__preview-header strong,
+.viewer-workspace__preview-header span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.viewer-workspace__preview-header span,
+.viewer-workspace__preview-header em,
+.viewer-workspace__empty {
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  font-size: 12px;
+}
+
+.viewer-workspace__code {
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-textCodeBlock-background, #111111);
+  color: var(--vscode-textPreformat-foreground, #d7ba7d);
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.viewer-workshop {
+  display: grid;
+  gap: 10px;
+}
+
+.viewer-workshop__panel {
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-editorWidget-background, #202020);
+  padding: 8px;
+}
+
+.viewer-workshop__panel--terminals {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.viewer-workshop__panel--terminals .viewer-workspace__placeholder {
+  margin: 0;
+  max-width: 480px;
+}
+
+.viewer-workshop__panel--terminals-active {
+  display: grid;
+  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
+  gap: 8px;
+  padding: 0;
+  background: var(--vscode-editorWidget-background, #202020);
+}
+
+.viewer-workshop__terminal-list {
+  border-right: 1px solid var(--vscode-panel-border, #333333);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 360px;
+}
+
+.viewer-workshop__terminal-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  text-transform: uppercase;
+}
+
+.viewer-workshop__terminal-new {
+  font-size: 11px;
+  padding: 2px 8px;
+}
+
+.viewer-workshop__terminal-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.viewer-workshop__terminal-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.viewer-workshop__terminal-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 6px;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--vscode-foreground, #d4d4d4);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.viewer-workshop__terminal-row:hover {
+  background: var(--vscode-list-hoverBackground, rgb(255 255 255 / 6%));
+}
+
+.viewer-workshop__terminal-row.is-active {
+  background: var(--vscode-list-activeSelectionBackground, #094771);
+  color: var(--vscode-list-activeSelectionForeground, #ffffff);
+}
+
+.viewer-workshop__terminal-row-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer-workshop__terminal-row-close {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.viewer-workshop__terminal-row-close:hover {
+  background: var(--vscode-list-errorBackground, rgb(244 135 113 / 25%));
+}
+
+.viewer-workshop__terminal-row-close.is-closing {
+  opacity: 0.85;
+  pointer-events: none;
+  cursor: progress;
+}
+
+.viewer-workshop__terminal-row.is-closing {
+  opacity: 0.6;
+  pointer-events: none;
+  cursor: progress;
+}
+
+.viewer-workshop__spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: viewer-workshop-spin 0.7s linear infinite;
+}
+
+@keyframes viewer-workshop-spin {
+  to { transform: rotate(360deg); }
+}
+
+.viewer-workshop__terminal-stage {
+  padding: 6px;
+  min-width: 0;
+}
+
+.viewer-workshop__terminal-host {
+  width: 100%;
+  height: 480px;
+  background: #0a0a0a;
+  border-radius: 4px;
+  padding: 6px;
+}
+
+.viewer-workshop__terminal-host .xterm {
+  height: 100%;
+}
+
+.viewer-workshop__group {
+  margin-bottom: 12px;
+}
+
+.viewer-workshop__group-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  margin: 0 0 4px;
+}
+
+.viewer-workshop__commands {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.viewer-workshop__command {
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 4px;
+  background: var(--vscode-textCodeBlock-background, #161616);
+  padding: 6px 8px;
+}
+
+.viewer-workshop__command-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.viewer-workshop__command-name {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.viewer-workshop__command-name strong {
+  font-size: 12px;
+}
+
+.viewer-workshop__command-source {
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground, #888888);
+}
+
+.viewer-workshop__command-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.viewer-workshop__command-meta {
+  margin: 4px 0;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+  overflow-wrap: anywhere;
+}
+
+.viewer-workshop__command-meta code {
+  font-family: var(--vscode-editor-font-family, monospace);
+}
+
+.viewer-workshop__state {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 6px;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 6%);
+  color: var(--vscode-descriptionForeground, #aaaaaa);
+}
+
+.viewer-workshop__state--running,
+.viewer-workshop__state--starting {
+  background: var(--vscode-debugIcon-startForeground, #387a14);
+  color: #ffffff;
 }
 
-.viewer-ci__heading--actions {
-  align-items: flex-start;
+.viewer-workshop__state--failed,
+.viewer-workshop__state--error {
+  background: var(--vscode-editorError-foreground, #f48771);
+  color: #1e1e1e;
 }
 
-.viewer-ci__heading--actions > div {
-  display: grid;
-  gap: 4px;
+.viewer-workshop__state--finished {
+  background: var(--vscode-charts-green, #4caf50);
+  color: #1e1e1e;
 }
 
-.viewer-ci__heading h2 {
-  margin: 0;
-  font-size: 13px;
+.viewer-workshop__state--stopped {
+  background: var(--vscode-charts-orange, #cca700);
+  color: #1e1e1e;
 }
 
-.viewer-ci__heading span {
+.viewer-workshop__exit {
+  font-size: 10px;
+  font-family: var(--vscode-editor-font-family, monospace);
   color: var(--vscode-descriptionForeground, #aaaaaa);
-  font-size: 12px;
 }
 
-.viewer-ci__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 20px;
-  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
-  border-radius: 999px;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-weight: 700;
+.viewer-workshop__exit--fail {
+  color: var(--vscode-editorError-foreground, #f48771);
 }
 
-.viewer-ci__list,
-.viewer-ci__jobs {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.viewer-workshop__log {
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  max-height: 200px;
+  overflow: auto;
+  font-size: 11px;
+  line-height: 1.4;
+  background: var(--vscode-terminal-background, #0a0a0a);
+  color: var(--vscode-terminal-foreground, #d4d4d4);
+  border-radius: 3px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
-.viewer-ci__row,
-.viewer-ci__job,
-.viewer-ci__empty {
-  min-width: 0;
-  border: 1px solid color-mix(in srgb, var(--vscode-panel-border, #333333) 74%, transparent);
-  border-radius: 6px;
-  padding: 8px 9px;
-  background: var(--vscode-sideBar-background, #252526);
-  font-size: 12px;
+.viewer-workshop__log:empty {
+  display: none;
 }
 
-.viewer-ci__row,
-.viewer-ci__job,
-.viewer-ci__job a {
+.viewer-lan-banner {
   display: flex;
-  justify-content: space-between;
-  gap: 12px;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  background: var(--vscode-statusBarItem-warningBackground, #b08600);
+  color: var(--vscode-statusBarItem-warningForeground, #1e1e1e);
+  font-size: 12px;
+  font-weight: 600;
+  border-bottom: 1px solid rgb(0 0 0 / 30%);
 }
 
-.viewer-ci__job a {
-  width: 100%;
-  color: inherit;
-  text-decoration: none;
+.viewer-lan-banner[hidden] {
+  display: none !important;
 }
 
-.viewer-ci__row span,
-.viewer-ci__job span {
-  color: var(--vscode-descriptionForeground, #aaaaaa);
+.viewer-lan-banner__icon {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 30%);
+  color: #ffd33d;
+  font-weight: 700;
 }
 
-.viewer-ci__row strong,
-.viewer-ci__job strong {
+.viewer-lan-banner__copy {
+  flex: 0 1 auto;
   min-width: 0;
-  text-align: right;
-  overflow-wrap: anywhere;
 }
 
-.viewer-ci__link {
-  display: inline-flex;
-  margin-top: 10px;
-  color: var(--vscode-textLink-foreground, #4ea1ff);
-  font-size: 12px;
+.viewer-lan-banner__copy-short {
+  display: none;
 }
 
-.viewer-ci__state,
-.viewer-ci__empty {
-  color: var(--vscode-descriptionForeground, #9da5b4);
+.viewer-lan-banner__url {
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-weight: 500;
+  font-size: 11px;
+  background: rgb(0 0 0 / 25%);
+  color: #ffffff;
+  padding: 2px 8px;
+  border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 40%;
+}
+
+.viewer-lan-banner__copy-button {
+  margin-left: auto;
+}
+
+.viewer-workspace__image {
+  max-width: 100%;
+  max-height: min(70vh, 760px);
+  object-fit: contain;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-textCodeBlock-background, #111111);
 }
 
 .viewer-cdx__stack {
@@ -1095,6 +1677,117 @@
   margin-top: 8px;
 }
 
+.viewer-cdx__controls {
+  display: flex;
+  justify-content: flex-start;
+  gap: 6px;
+  margin: 8px 0 12px;
+}
+
+.viewer-cdx__menu {
+  position: relative;
+}
+
+.viewer-cdx__menu > summary {
+  list-style: none;
+}
+
+.viewer-cdx__menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.viewer-cdx__icon-button {
+  min-width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  box-sizing: border-box;
+  background: var(--vscode-button-secondaryBackground, transparent);
+  color: var(--vscode-button-secondaryForeground, var(--vscode-foreground, #d4d4d4));
+  cursor: pointer;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+
+.viewer-cdx__icon-button:hover {
+  border-color: color-mix(in srgb, var(--vscode-textLink-foreground, #4ea1ff) 45%, var(--vscode-panel-border, #333333));
+  color: var(--vscode-textLink-foreground, #4ea1ff);
+}
+
+.viewer-cdx__icon-button svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.viewer-cdx__icon-count {
+  display: inline-block;
+  min-width: 18px;
+  font-size: 10px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.viewer-cdx__menu-panel {
+  position: absolute;
+  z-index: 25;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 170px;
+  max-height: min(340px, calc(100vh - 150px));
+  overflow: auto;
+  display: grid;
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--vscode-panel-border, #333333);
+  border-radius: 6px;
+  background: var(--vscode-dropdown-background, var(--vscode-editorWidget-background, #202020));
+  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
+}
+
+.viewer-cdx__menu-check {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 5px 6px;
+  border-radius: 4px;
+  color: var(--vscode-foreground, #d4d4d4);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.viewer-cdx__menu-check:hover,
+.viewer-cdx__menu-action:hover {
+  background: var(--vscode-list-hoverBackground, rgb(255 255 255 / 8%));
+}
+
+.viewer-cdx__menu-check input {
+  flex: 0 0 auto;
+}
+
+.viewer-cdx__menu-check span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer-cdx__menu-action {
+  border: 0;
+  border-radius: 4px;
+  padding: 6px;
+  background: transparent;
+  color: var(--vscode-textLink-foreground, #4ea1ff);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
 .viewer-cdx__table-wrap {
   min-width: 0;
   overflow-x: auto;
@@ -1309,6 +2002,10 @@
   .viewer-cdx__workspace {
     grid-template-columns: 1fr;
   }
+
+  .viewer-workspace {
+    grid-template-columns: 1fr;
+  }
 }
 
 .viewer-git__section h2 {
@@ -1949,9 +2646,10 @@
   }
 
   .viewer-refresh-menu__panel {
-    left: 0;
-    right: auto;
-    min-width: min(260px, 100%);
+    right: 0;
+    left: auto;
+    min-width: 260px;
+    max-width: calc(100vw - 16px);
   }
 
   .viewer-document {
@@ -1981,3 +2679,173 @@
     grid-template-columns: 1fr;
   }
 }
+
+/* ---------------------------------------------------------------------------
+ * Responsive viewer conventions (req_246 / task_221).
+ *
+ *   Desktop:       default rules above.
+ *   Tablet (=600): collapse multi-column grids and soften min-width floors so
+ *                  any iPad-portrait or split-screen layout still works.
+ *   Phone  (=420): shrink chrome (topbar, toolbar, banner, filter panel) and
+ *                  let monospace blocks (diffs, code preview) wrap without
+ *                  triggering a viewport-level horizontal scroll.
+ *
+ * Items 2-4 add their rules in clearly-labelled @media blocks below; new
+ * responsive tweaks should land in the matching block instead of creating
+ * one-off breakpoints (the historical 560/700/860/980 queries above stay so
+ * existing layouts do not regress).
+ * --------------------------------------------------------------------------- */
+
+/* req_246 item_426 — Git screen fixes at small breakpoints. */
+@media (max-width: 600px) {
+  .viewer-git__workspace,
+  .viewer-git__workspace.has-diff-detail {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* req_246 item_428 — Phone (=420px) chrome adjustments. Compress the
+ * topbar (wrap actions to a second row, shrink padding), let the filter
+ * panel stack, give the floating document inset more screen, tighten the
+ * update + LAN banners, and shrink the buttons enough to fit a 360px
+ * viewport without breaking primary affordances.
+ */
+@media (max-width: 420px) {
+  .viewer-topbar {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .viewer-topbar__actions {
+    flex-wrap: wrap;
+    gap: 4px;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .viewer-topbar__actions button {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+
+  .viewer-topbar__identity {
+    flex-wrap: wrap;
+  }
+
+  .viewer-topbar__meta {
+    width: 100%;
+    font-size: 11px;
+  }
+
+  .viewer-filter-panel {
+    gap: 8px;
+  }
+
+  .viewer-document {
+    inset: 56px 6px 6px;
+    border-radius: 6px;
+  }
+
+  .viewer-update {
+    flex-wrap: wrap;
+    padding: 6px 10px;
+    font-size: 11px;
+  }
+}
+
+/* LAN banner: compact form on every non-desktop viewport. The full message
+ * + URL chip + Copy button row needs at least a desktop-width line to read
+ * cleanly; below that we drop the URL chip (the Copy button covers it) and
+ * switch to a short message variant. */
+@media (max-width: 720px) {
+  .viewer-lan-banner {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  .viewer-lan-banner__icon {
+    width: 14px;
+    height: 14px;
+    font-size: 10px;
+  }
+
+  .viewer-lan-banner__copy {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .viewer-lan-banner__url {
+    display: none !important;
+  }
+
+  .viewer-lan-banner__copy-long {
+    display: none;
+  }
+
+  .viewer-lan-banner__copy-short {
+    display: inline;
+  }
+
+  .viewer-lan-banner__copy-button {
+    margin-left: auto;
+    padding: 2px 8px;
+    font-size: 10px;
+    line-height: 1.2;
+  }
+}
+
+/* req_246 item_427 — Tablet (=600px) grid collapses for board, CDX, CI,
+ * Workspace, and insights screens. Also soften the hard min-width floors so
+ * an iPad-portrait or split-screen layout no longer triggers a horizontal
+ * scroll on the body.
+ */
+@media (max-width: 600px) {
+  .viewer-filter-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .viewer-cdx__workspace,
+  .viewer-cdx__workspace--missions,
+  .viewer-ci__workspace,
+  .viewer-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .viewer-git__summary,
+  .viewer-cdx__summary,
+  .viewer-ci__summary,
+  .viewer-insights__summary,
+  .viewer-health__summary {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+@media (max-width: 420px) {
+  .viewer-git__files li {
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .viewer-git-badges,
+  .viewer-git-badge {
+    flex-wrap: wrap;
+  }
+
+  .viewer-git__diff pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-size: 11px;
+  }
+
+  .viewer-git__diff-meta {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+}