From 4948e21803992128b92d5fd3e936cf622277625c Mon Sep 17 00:00:00 2001 From: Iaroslav Moskviak Date: Fri, 17 Apr 2026 00:10:34 -0400 Subject: [PATCH 1/2] Toolbar responsive fixes & subunit textarea improvements --- src/app/core/base/base.component.html | 8 +- src/app/core/base/base.component.scss | 28 +-- src/app/core/base/base.component.ts | 11 + .../subunit-form/subunit-form.component.html | 191 +++++++++++++----- .../subunit-form/subunit-form.component.scss | 6 + .../subunit-form/subunit-form.component.ts | 9 +- src/styles/_material-overrides.scss | 5 + 7 files changed, 176 insertions(+), 82 deletions(-) diff --git a/src/app/core/base/base.component.html b/src/app/core/base/base.component.html index b0d7f404c..8ca67ecda 100644 --- a/src/app/core/base/base.component.html +++ b/src/app/core/base/base.component.html @@ -117,7 +117,7 @@ Browse Substances -
+
@@ -360,7 +360,7 @@ Registrars @@ -370,7 +370,7 @@
-
+
{ @@ -141,6 +145,13 @@ export class BaseComponent implements OnInit, OnDestroy { } async ngOnInit() { + const breakpointSub = this.breakpointObserver + .observe(['(min-width: 1611px)', '(min-width: 1501px)']) + .subscribe(result => { + this.showRegistrars = result.breakpoints['(min-width: 1611px)']; + this.showBrowseOther = result.breakpoints['(min-width: 1501px)']; + }); + this.subscriptions.push(breakpointSub); this.showHeaderBar = this.activatedRoute.snapshot.queryParams["header"] || "true"; this.loadedComponents = this.configService.configData.loadedComponents || null; diff --git a/src/app/core/substance-form/subunit-form/subunit-form.component.html b/src/app/core/substance-form/subunit-form/subunit-form.component.html index 4df2cc912..d90354cca 100644 --- a/src/app/core/substance-form/subunit-form/subunit-form.component.html +++ b/src/app/core/substance-form/subunit-form/subunit-form.component.html @@ -1,72 +1,163 @@ -
+
Deleted  -
-
+
-
-
Subunit {{subunit.subunitIndex}}
-
- - - - - +
Subunit {{ subunit.subunitIndex }}
+
+ + + + - sequence search - - - + sequence search + + +
-
- -
-
-
-
-
{{subunit.sequence}}
-
+
+
+
+
+
+
{{ subunit.sequence }}
+
+
- -
-
-
-
-
{{num[1]}}
-
- - {{subunit.unitValue}} - +
+
+
+
+
{{ num[1] }}
+
+ + {{ subunit.unitValue }} + +
-
-
-
- Generate{{sequenceType? 'd':''}} links and sugars for this subunit as a - - +
+
+ Generate{{ sequenceType ? "d" : "" }} links and sugars for this subunit as + a + + sequence
- +
diff --git a/src/app/core/substance-form/subunit-form/subunit-form.component.scss b/src/app/core/substance-form/subunit-form/subunit-form.component.scss index ebeb2841c..66842eb3f 100644 --- a/src/app/core/substance-form/subunit-form/subunit-form.component.scss +++ b/src/app/core/substance-form/subunit-form/subunit-form.component.scss @@ -11,6 +11,11 @@ .sequence-textarea { font-size: 14px; letter-spacing: 2px; + font-family: monospace; + overflow: hidden; + resize: vertical; + width: 100%; + box-sizing: border-box; } .show { @@ -66,6 +71,7 @@ .section-units-container { display: flex; + min-width: calc(10 * 15.5px); .section-unit { /*flex-grow: 1;*/ diff --git a/src/app/core/substance-form/subunit-form/subunit-form.component.ts b/src/app/core/substance-form/subunit-form/subunit-form.component.ts index 4744b14ef..c6e3e9c87 100644 --- a/src/app/core/substance-form/subunit-form/subunit-form.component.ts +++ b/src/app/core/substance-form/subunit-form/subunit-form.component.ts @@ -258,11 +258,18 @@ window.open( url, '_blank'); setTimeout(() => { const textArea = document.getElementsByClassName('sequence-textarea'); [].forEach.call(textArea, function (area) { - area.style.height = (area.scrollHeight + 10) + 'px'; + area.style.height = 'auto'; + area.style.height = area.scrollHeight + 'px'; }); }); } } + autoResize(event: Event): void { + const textarea = event.target as HTMLTextAreaElement; + textarea.style.height = 'auto'; + textarea.style.height = textarea.scrollHeight + 'px'; + } + change(event): void { if (this.toggle[this.subunit.subunitIndex] === false) { event.target.value = this.subunit.sequence; diff --git a/src/styles/_material-overrides.scss b/src/styles/_material-overrides.scss index 59a87649b..5edd9a79a 100644 --- a/src/styles/_material-overrides.scss +++ b/src/styles/_material-overrides.scss @@ -540,6 +540,11 @@ button.mat-mdc-menu-item[ng-reflect-menu], } } +// Ensure CDK overlay (tooltips, menus, dialogs) always renders above the fixed toolbar (z-index: 1001) +.cdk-overlay-container { + z-index: 1002; +} + // Fix for nested menu positioning in Angular Material 19 MDC // Ensure the CDK overlay positioning works correctly .cdk-overlay-connected-position-bounding-box { From 3a0020dbe4c114ba8c2e273197b39d48142dd8df Mon Sep 17 00:00:00 2001 From: Iaroslav Moskviak Date: Fri, 17 Apr 2026 10:06:53 -0400 Subject: [PATCH 2/2] fixed specificity issue for font-family --- .../substance-form/subunit-form/subunit-form.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/substance-form/subunit-form/subunit-form.component.scss b/src/app/core/substance-form/subunit-form/subunit-form.component.scss index 66842eb3f..43ad44bc4 100644 --- a/src/app/core/substance-form/subunit-form/subunit-form.component.scss +++ b/src/app/core/substance-form/subunit-form/subunit-form.component.scss @@ -8,7 +8,7 @@ } } -.sequence-textarea { +textarea.sequence-textarea { font-size: 14px; letter-spacing: 2px; font-family: monospace;