diff --git a/src/css/ucm/workspace/workspace-card.css b/src/css/ucm/workspace/workspace-card.css index bf571cb..d3f10f8 100644 --- 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 index deeaba5..a56eec3 100644 --- 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 index 2f905d0..fd0c625 100644 --- 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; }