fixes in css

2026-08-03 13:13:11 +02:00
parent 8b8b3b82b8
commit 825edeab92
6 changed files with 170 additions and 6 deletions
@@ -6572,3 +6572,137 @@ dialog::backdrop {
 .form-message.warning {
  color: var(--warning);
 }
+
+/* Keep editor mode/view controls inside the viewport at browser zoom. */
+.control-label-short {
+  display: none;
+}
+
+.pad-page .editor-toolbar,
+.pad-page .toolbar-group,
+.pad-page .view-switch {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pad-page #mode-toggle,
+.pad-page .view-switch {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 1699px) {
+  .pad-page :is(#mode-toggle, .view-switch) .control-label-full {
+    display: none;
+  }
+
+  .pad-page :is(#mode-toggle, .view-switch) .control-label-short {
+    display: inline;
+  }
+
+  .pad-page #mode-toggle {
+    width: 36px;
+    min-width: 36px;
+    padding-inline: 6px;
+  }
+
+  .pad-page .view-switch button {
+    width: 36px;
+    min-width: 36px;
+    padding-inline: 6px;
+  }
+}
+
+@media (max-width: 760px) {
+  .pad-page .editor-toolbar {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    width: 100%;
+    max-width: 100vw;
+  }
+
+  .pad-page #mode-toggle {
+    display: inline-flex;
+  }
+
+  .pad-page .view-switch button,
+  .pad-page .view-switch button[data-view="split"] {
+    display: inline-flex;
+    width: 34px;
+    min-width: 34px;
+    align-items: center;
+    justify-content: center;
+    padding-inline: 5px;
+  }
+
+  .pad-page .workspace.view-split {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .pad-page .workspace.view-split .preview-column {
+    display: grid;
+    opacity: 1;
+    transform: translateX(0);
+    border-top: 1px solid var(--border);
+  }
+}
+
+/* History content wraps vertically and never creates a horizontal scrollbar. */
+.history-panel {
+  max-width: 100vw;
+  min-width: 0;
+}
+
+.history-list {
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.revision {
+  min-width: 0;
+  grid-template-columns: 12px minmax(0, 1fr);
+}
+
+.revision > div,
+.revision__meta,
+.revision__meta strong,
+.revision time,
+.revision__snippet,
+.revision__preview {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.revision__meta {
+  flex-wrap: wrap;
+}
+
+.revision__meta strong,
+.revision time,
+.revision__snippet,
+.revision__preview {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.revision__snippet {
+  white-space: normal;
+}
+
+.revision__preview {
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.history-header > div,
+.history-header h2,
+.history-header p,
+.history-help,
+.history-list .empty,
+.history-list .error {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}