From 07fa1487f132b622bb9b907bdc6414014939b73e Mon Sep 17 00:00:00 2001 From: Alexander Minges Date: Thu, 17 Jul 2025 17:50:20 +0200 Subject: [PATCH 1/3] fix(ui): use consistent height variable for select and input elements --- scss/components/actor/_actor_properties.scss | 2 +- scss/components/shared/_form_group.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/components/actor/_actor_properties.scss b/scss/components/actor/_actor_properties.scss index 78edeb28..cfa631ad 100644 --- a/scss/components/actor/_actor_properties.scss +++ b/scss/components/actor/_actor_properties.scss @@ -26,7 +26,7 @@ &__property-select { width: 100%; - height: var(--form-field-height); + height: var(--input-height); } &__property-multi-input { diff --git a/scss/components/shared/_form_group.scss b/scss/components/shared/_form_group.scss index 12687e48..2a3032b3 100644 --- a/scss/components/shared/_form_group.scss +++ b/scss/components/shared/_form_group.scss @@ -22,6 +22,6 @@ &__label { flex: 2; - line-height: var(--form-field-height); + line-height: var(--input-height); } } From 970f69be539f3984e0f5f435f4a94d81e0ee9427 Mon Sep 17 00:00:00 2001 From: Alexander Minges Date: Thu, 17 Jul 2025 18:19:06 +0200 Subject: [PATCH 2/3] fix(editor): prevent double scrollbars in biography tab --- scss/components/actor/_biography.scss | 40 +++++++++++++++++++++++++ scss/components/shared/_editor.scss | 36 ++++++++++++++++++++++ scss/components/shared/_sheet_body.scss | 5 ++++ 3 files changed, 81 insertions(+) diff --git a/scss/components/actor/_biography.scss b/scss/components/actor/_biography.scss index cf033a71..058b30f4 100644 --- a/scss/components/actor/_biography.scss +++ b/scss/components/actor/_biography.scss @@ -8,4 +8,44 @@ display: grid; grid-template-columns: 1fr 3fr; column-gap: 1em; + height: 100%; +} + +.ds4-biography { + height: 100%; + overflow: hidden; + + prose-mirror { + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + + // Edit mode with editor container + &.active { + .editor-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .editor-content { + flex: 1; + overflow-y: auto; + min-height: 0; + } + } + } + + // View mode - direct editor-content + &.inactive { + .editor-content { + position: relative; + flex: 1; + overflow-y: auto; + min-height: 0; + inset: auto; + } + } + } } diff --git a/scss/components/shared/_editor.scss b/scss/components/shared/_editor.scss index dead15ce..58bbe088 100644 --- a/scss/components/shared/_editor.scss +++ b/scss/components/shared/_editor.scss @@ -14,5 +14,41 @@ background: transparent; } } + + prose-mirror { + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + + // Edit mode with editor container + &.active { + .editor-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .editor-content { + flex: 1; + overflow-y: auto; + min-height: 0; + } + } + } + + // View mode - direct editor-content + &.inactive { + .editor-content { + position: relative; + flex: 1; + overflow-y: auto; + min-height: 0; + inset: auto; + } + } + } } + + } diff --git a/scss/components/shared/_sheet_body.scss b/scss/components/shared/_sheet_body.scss index 3b19d5ca..0718c6a6 100644 --- a/scss/components/shared/_sheet_body.scss +++ b/scss/components/shared/_sheet_body.scss @@ -7,4 +7,9 @@ .ds4-sheet-body { height: 100%; overflow-y: auto; + + // Prevent double scrollbars on biography tab + .ds4-sheet-tab.tab.biography.active { + overflow: hidden; + } } From 590045405b60f12780a9a994f78acd2ad2adf3ea Mon Sep 17 00:00:00 2001 From: Alexander Minges Date: Thu, 17 Jul 2025 18:23:07 +0200 Subject: [PATCH 3/3] refactor(styles): extract shared ProseMirror styles to reduce duplication --- scss/components/actor/_biography.scss | 34 ----------------- scss/components/shared/_editor.scss | 55 +++++++++++++-------------- 2 files changed, 27 insertions(+), 62 deletions(-) diff --git a/scss/components/actor/_biography.scss b/scss/components/actor/_biography.scss index 058b30f4..fb6b22ec 100644 --- a/scss/components/actor/_biography.scss +++ b/scss/components/actor/_biography.scss @@ -14,38 +14,4 @@ .ds4-biography { height: 100%; overflow: hidden; - - prose-mirror { - height: 100%; - display: flex; - flex-direction: column; - overflow: hidden; - - // Edit mode with editor container - &.active { - .editor-container { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - - .editor-content { - flex: 1; - overflow-y: auto; - min-height: 0; - } - } - } - - // View mode - direct editor-content - &.inactive { - .editor-content { - position: relative; - flex: 1; - overflow-y: auto; - min-height: 0; - inset: auto; - } - } - } } diff --git a/scss/components/shared/_editor.scss b/scss/components/shared/_editor.scss index 58bbe088..76c8cebf 100644 --- a/scss/components/shared/_editor.scss +++ b/scss/components/shared/_editor.scss @@ -14,41 +14,40 @@ background: transparent; } } + } +} - prose-mirror { - height: 100%; +// General ProseMirror editor styles +prose-mirror { + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + + // Edit mode with editor container + &.active { + .editor-container { + flex: 1; display: flex; flex-direction: column; overflow: hidden; - // Edit mode with editor container - &.active { - .editor-container { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - - .editor-content { - flex: 1; - overflow-y: auto; - min-height: 0; - } - } - } - - // View mode - direct editor-content - &.inactive { - .editor-content { - position: relative; - flex: 1; - overflow-y: auto; - min-height: 0; - inset: auto; - } + .editor-content { + flex: 1; + overflow-y: auto; + min-height: 0; } } } - + // View mode - direct editor-content + &.inactive { + .editor-content { + position: relative; + flex: 1; + overflow-y: auto; + min-height: 0; + inset: auto; + } + } }