Merge pull request #28 from unisonweb/workspace-pane-widths

Update WorkspacePanes to better handle scroll and overflow
unisonweb · Jan 7, 2025 · b8c3c72 · b8c3c72
2 parents b9f1686 + 2a54643
commit b8c3c72
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/src/css/ucm/workspace/workspace-card.css b/src/css/ucm/workspace/workspace-card.css
@@ -2,7 +2,7 @@
   --c-workspace-card_border: var(--u-color_border_subdued);
   --c-workspace-card_background: var(--u-color_container_faded);
   --c-workspace-card_width: calc(var(--readable-column-width-medium) + 2rem);
-  --c-width_doc_inner-content: var(--c-workspace-card_width);
+
 
   display: flex;
   flex-direction: column;
@@ -61,7 +61,7 @@
     flex-direction: column;
     gap: 0;
     padding: 0.75rem;
-    max-width: min(calc(var(--c-workspace-card_width) - 1.5rem), 100%);
+    width: 100%;
   }
 
   & .workspace-card_loading {
@@ -91,3 +91,19 @@
     background: var(--u-color_container);
   }
 }
+
+.workspace-card .definition-doc {
+  --c-width_doc_inner-content: 100%;
+  --c-width_doc_source: 100%;
+}
+
+@container workspace-pane (max-width: 968px) {
+  /* TODO: these are the styles from ui-core. This container query probably
+   * belongs there showhow */
+  .workspace-card aside {
+    position: relative;
+    right: auto;
+    width: auto;
+    margin: 1.5rem 1.5rem 1.5rem 1.5rem;
+  }
+}
diff --git a/src/css/ucm/workspace/workspace-pane.css b/src/css/ucm/workspace/workspace-pane.css
@@ -4,7 +4,11 @@
   gap: 0.75rem;
   padding: 0.75rem;
   overflow: auto;
-  width: min(var(--c-workspace-card_width), 100%);
+  width: 100%;
+  /*min-width: max-content;*/
+
+  container-type: inline-size;
+  container-name: workspace-pane;
 
   & .error {
     display: flex;

diff --git a/src/css/ucm/workspace/workspace-panes.css b/src/css/ucm/workspace/workspace-panes.css
@@ -30,6 +30,18 @@
 }
 
 .workspace-panes .workspace-card {
-  width: 100%;
-  min-width: max-content;
+  --c-workspace-card_width: 100%;
+}
+
+/* TODO: these are the styles from ui-core. Would be better if it were more
+ * dynamic somehow */
+.workspace-panes .workspace-card aside {
+  position: relative;
+  right: auto;
+  width: auto;
+  margin: 1.5rem 1.5rem 1.5rem 1.5rem;
+}
+
+.workspace-panes .workspace-card_main-content:has(>.rich) {
+  overflow-x: auto;
 }