Toolbar responsive fixes & subunit textarea improvements

src/app/core/base/base.component.html

@@ -117,7 +117,7 @@
       Browse Substances
     </button>
   </div>
-  <div *ngIf="this.loadedComponents">
+  <div *ngIf="this.loadedComponents && showBrowseOther">
     <button
       class="top-button extra-browse"
       mat-button
@@ -329,7 +329,7 @@
         class="user"
         *ngIf="auth && auth.identifier"
         matTooltip="{{ auth.identifier }}"
-        >{{ auth.identifier }}</span
+        >{{ auth.identifier.length > 9 ? (auth.identifier | slice:0:9) + '…' : auth.identifier }}</span
       >
     </div>
     <mat-menu #accountMenu="matMenu" (closed)="removeZindex()">
@@ -360,7 +360,7 @@
       <a
         [routerLink]="['/registrars']"
         class="add-at-low-res"
-        *ngIf="canRegister"
+        *ngIf="canRegister && !showRegistrars"
         mat-menu-item
       >
         <span>Registrars</span>
@@ -370,7 +370,7 @@
       </button>
     </mat-menu>
   </div>
-  <div class="classic-view-container" *ngIf="auth && auth.identifier">
+  <div class="classic-view-container" *ngIf="auth && auth.identifier && showRegistrars">
     <a
       class="top-button hide-at-low-res"
       mat-button

src/app/core/base/base.component.scss

@@ -25,6 +25,7 @@
   font-size: 12px;
   letter-spacing: 0.4px;
   color: var(--regular-white-color);
+  white-space: nowrap;
 }
 .arrow-button {
   margin-left: -13px !important;
@@ -232,40 +233,13 @@ button.mat-mdc-button.top-button {
   display: inline-block;
 }
 
-// hides extra browse (for half 1920 to save space)
-@media (max-width: 1500px) {
-  .extra-browse {
-    display: none !important;
-  }
-}
-
 // hides all but main menu
 @media (max-width: 1350px) {
   .extra-item {
     display: none !important;
   }
 }
 
-@media (max-width: 1610px) {
-  .add-at-low-res {
-    display: inline !important;
-  }
-
-  .hide-at-low-res {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1610px) {
-  .add-at-low-res {
-    display: none !important;
-  }
-
-  .hide-at-low-res {
-    display: inline-block;
-  }
-}
-
 @media (max-width: 1650px) {
   .extra-item-2 {
     display: none !important;

src/app/core/base/base.component.ts

@@ -5,6 +5,7 @@ import {
   HostListener,
   OnDestroy,
 } from "@angular/core";
+import { BreakpointObserver } from "@angular/cdk/layout";
 import {
   Router,
   Event,
@@ -81,6 +82,8 @@ export class BaseComponent implements OnInit, OnDestroy {
   private wildCardText: string;
   private classicLinkQueryParams = {};
   showHeaderBar = "true";
+  showRegistrars = true;
+  showBrowseOther = true;
 
   constructor(
     private router: Router,
@@ -94,6 +97,7 @@ export class BaseComponent implements OnInit, OnDestroy {
     private substanceTextSearchService: SubstanceTextSearchService,
     private utilsService: UtilsService,
     private wildCardService: WildcardService,
+    private breakpointObserver: BreakpointObserver,
   ) {
     this.customToolbarComponent = this.configService.configData.customToolbarComponent;
     this.wildCardService.wildCardObservable.subscribe((data) => {
@@ -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;
 

src/app/core/substance-form/subunit-form/subunit-form.component.html

@@ -1,72 +1,163 @@
-<div class = "subunit-container">
+<div class="subunit-container">
   <div *ngIf="subunit.$$deletedCode" class="notification-backdrop">
     Deleted&nbsp;
-
   </div>
-  <div class = "form-row">
+  <div class="form-row">
     <div class="delete-container">
-      <button mat-icon-button matTooltip="Delete link" (click)="deleteSubunit()">
+      <button
+        mat-icon-button
+        matTooltip="Delete link"
+        (click)="deleteSubunit()"
+      >
         <mat-icon svgIcon="delete_forever"></mat-icon>
       </button>
     </div>
-    <div class = "subunit-label">Subunit {{subunit.subunitIndex}}</div>
-    <div class = "buttons">
-      <button  mat-button class = " action-button " color="primary" (click) = 'editSubunit(subunit, editSequence)'>
-        {{toggle[subunit.subunitIndex] ? 'save': 'edit'}}</button>
-      <button mat-button class = " action-button " color="primary" (click) = cleanSequence()>
-        clean</button>
-      <span class = "spacer"> </span>
-      <button mat-button class = " action-button convert" color="primary" matTooltip = "convert 3 letter sequence to 1 letter"
-      *ngIf = "substanceType !== 'nucleicAcid'"  (click) = convertSequence()>
-        convert</button>
-
+    <div class="subunit-label">Subunit {{ subunit.subunitIndex }}</div>
+    <div class="buttons">
+      <button
+        mat-button
+        class="action-button"
+        color="primary"
+        (click)="editSubunit(subunit, editSequence)"
+      >
+        {{ toggle[subunit.subunitIndex] ? "save" : "edit" }}
+      </button>
+      <button
+        mat-button
+        class="action-button"
+        color="primary"
+        (click)="cleanSequence()"
+      >
+        clean
+      </button>
+      <span class="spacer"> </span>
+      <button
+        mat-button
+        class="action-button convert"
+        color="primary"
+        matTooltip="convert 3 letter sequence to 1 letter"
+        *ngIf="substanceType !== 'nucleicAcid'"
+        (click)="convertSequence()"
+      >
+        convert
+      </button>
 
-      <a mat-button color="primary" class = "button-link " matTooltip ="search for sequence in a new tab" (click) = "search()">sequence search</a>
-      <button mat-button class = " action-button " color="primary" matTooltip = "copy disulfides from another subunit"  (click) = copyDisulfides() *ngIf = "substanceType === 'protein'">
-          copy disulfide links</button>
-<span class = "middle-fill"></span>
-        <button mat-button class = " action-button " color="primary" (click)="copySequence()">
-          Copy to Clipboard
-          <mat-icon svgIcon="outline-file_copy" matTooltip = "Copy Sequence to clipboard"></mat-icon>
-        </button>
+      <a
+        mat-button
+        color="primary"
+        class="button-link"
+        matTooltip="search for sequence in a new tab"
+        (click)="search()"
+        >sequence search</a
+      >
+      <button
+        mat-button
+        class="action-button"
+        color="primary"
+        matTooltip="copy disulfides from another subunit"
+        (click)="copyDisulfides()"
+        *ngIf="substanceType === 'protein'"
+      >
+        copy disulfide links
+      </button>
+      <span class="middle-fill"></span>
+      <button
+        mat-button
+        class="action-button"
+        color="primary"
+        (click)="copySequence()"
+      >
+        Copy to Clipboard
+        <mat-icon
+          svgIcon="outline-file_copy"
+          matTooltip="Copy Sequence to clipboard"
+        ></mat-icon>
+      </button>
     </div>
   </div>
 
-<div class="subunit-edit" [ngClass]="toggle[subunit.subunitIndex] ? 'show': 'hide'" >
-  <textarea #sequence cdkAutosizeMinRows="3" placeholder="Enter sequence here"  [(ngModel)] = 'editSequence' (change) = "editSubunit(subunit, editSequence)" class = "sequence-textarea"  name="edit"></textarea>
-</div>
-<div [ngClass]="toggle[subunit.subunitIndex] ? 'hide': 'show'"  >
-  <div class = "nest">
-    <div class="subunit">
-      <div class="raw-sequence">{{subunit.sequence}}</div>
-    </div>
+  <div
+    class="subunit-edit"
+    [ngClass]="toggle[subunit.subunitIndex] ? 'show' : 'hide'"
+  >
+    <textarea
+      #sequence
+      rows="3"
+      placeholder="Enter sequence here"
+      [(ngModel)]="editSequence"
+      (change)="editSubunit(subunit, editSequence)"
+      (input)="autoResize($event)"
+      class="sequence-textarea"
+      name="edit"
+    ></textarea>
   </div>
+  <div [ngClass]="toggle[subunit.subunitIndex] ? 'hide' : 'show'">
+    <div class="nest">
+      <div class="subunit">
+        <div class="raw-sequence">{{ subunit.sequence }}</div>
+      </div>
+    </div>
 
-
-  <div class="subunit-sequence" *ngIf = "subunitSequence">
-    <div class="responsive">
-      <div *ngFor = "let set of subunitSequence.subsections;last as last1"  class="sequence-section-group">
-        <div *ngFor = "let num of set;last as last2" class= "sequence-section"  [ngClass] = "last1 && last2? 'last-section' : ''" >
-          <div class = "section-number">{{num[1]}}</div>
-          <div class = section-units-container>
-          <span *ngFor = "let subunit of subunitSequence.subunits.slice(num[0],num[1])"  class="section-unit" >
-              <span class = "selectedSite siteref" matTooltipClass="unit-tooltip"
-                    matTooltip ="{{getTooltipMessage(subunitSequence.subunitIndex, subunit.unitIndex, subunit.unitValue,subunit.class || '').join('\n')}}"
-                    [ngClass]="subunit.class" >{{subunit.unitValue}}</span>
-        </span>
+    <div class="subunit-sequence" *ngIf="subunitSequence">
+      <div class="responsive">
+        <div
+          *ngFor="let set of subunitSequence.subsections; last as last1"
+          class="sequence-section-group"
+        >
+          <div
+            *ngFor="let num of set; last as last2"
+            class="sequence-section"
+            [ngClass]="last1 && last2 ? 'last-section' : ''"
+          >
+            <div class="section-number">{{ num[1] }}</div>
+            <div class="section-units-container">
+              <span
+                *ngFor="
+                  let subunit of subunitSequence.subunits.slice(num[0], num[1])
+                "
+                class="section-unit"
+              >
+                <span
+                  class="selectedSite siteref"
+                  matTooltipClass="unit-tooltip"
+                  matTooltip="{{
+                    getTooltipMessage(
+                      subunitSequence.subunitIndex,
+                      subunit.unitIndex,
+                      subunit.unitValue,
+                      subunit.class || ''
+                    ).join('\n')
+                  }}"
+                  [ngClass]="subunit.class"
+                  >{{ subunit.unitValue }}</span
+                >
+              </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
-  <div class = 'form-row'>
-    <div *ngIf = "substanceType === 'nucleicAcid'">
-      Generate{{sequenceType? 'd':''}} links and sugars for this subunit as a
-      <button mat-button (click) = "generateSites('DNA')" [ngClass]="sequenceType === 'DNA'?'generated':''">DNA</button>
-      <button mat-button (click) = "generateSites('RNA')" [ngClass]="sequenceType === 'RNA'?'generated':''">RNA</button>
+  <div class="form-row">
+    <div *ngIf="substanceType === 'nucleicAcid'">
+      Generate{{ sequenceType ? "d" : "" }} links and sugars for this subunit as
+      a
+      <button
+        mat-button
+        (click)="generateSites('DNA')"
+        [ngClass]="sequenceType === 'DNA' ? 'generated' : ''"
+      >
+        DNA
+      </button>
+      <button
+        mat-button
+        (click)="generateSites('RNA')"
+        [ngClass]="sequenceType === 'RNA' ? 'generated' : ''"
+      >
+        RNA
+      </button>
       sequence
     </div>
   </div>
-  <app-audit-info [source] = "subunit"></app-audit-info>
+  <app-audit-info [source]="subunit"></app-audit-info>
 </div>

src/app/core/substance-form/subunit-form/subunit-form.component.scss

@@ -8,9 +8,14 @@
   }
 }
 
-.sequence-textarea {
+textarea.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;*/

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;

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 {