spiderly 19.11.8 → 19.11.9

package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
+import { AfterViewInit, ErrorHandler, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
 import { SelectItem, SortMeta } from 'primeng/api';
@@ -10,6 +10,7 @@ import { Filter } from '../../entities/filter';
 import { LazyLoadSelectedIdsResult } from '../../entities/lazy-load-selected-ids-result';
 import { PaginatedResult } from '../../entities/paginated-result';
 import { PrimengOption } from '../../entities/primeng-option';
+import { MatchModeCodes } from '../../enums/match-mode-enum-codes';
 import { ConfigServiceBase } from '../../services/config.service.base';
 import { SpiderlyMessageService } from '../../services/spiderly-message.service';
 import { SpiderlyFormControl } from '../spiderly-form-control/spiderly-form-control';
@@ -21,6 +22,7 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
     private messageService;
     private translocoService;
     private configService;
+    private errorHandler;
     private locale;
     private readonly destroy$;
     table: Table;
@@ -47,6 +49,19 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
     showCardWrapper: boolean;
     readonly: boolean;
     idField: string;
+    /**
+     * Sizes the columns from their declared widths instead of from the rendered rows.
+     *
+     * The browser default is `table-layout: auto`, which computes every column from the content
+     * of the rows currently on screen — so a column is one width on this page and another on the
+     * next, and a filter (which narrows the variety of values in the column it filters) moves the
+     * whole grid. PrimeNG sets no `table-layout` of its own, so without this the table inherits
+     * that default. Bound to a field, never an object literal in the template: a literal is a new
+     * reference on every change-detection pass.
+     */
+    protected readonly tableStyle: {
+        'table-layout': string;
+    };
     totalRecords: number;
     onTotalRecordsChange: EventEmitter<number>;
     getPaginatedListObservableMethod: (tableFilter: Filter) => Observable<PaginatedResult>;
@@ -54,7 +69,7 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
     deleteItemFromTableObservableMethod: (rowId: number) => Observable<any>;
     deleteListFromTableObservableMethod: (ids: number[]) => Observable<any>;
     lastLazyLoadEvent: TableLazyLoadEvent;
-    loading: boolean;
+    private loading;
     newlySelectedItems: number[];
     fakeSelectedItems: number[];
     currentPageSelectedItemsFromDb: number[];
@@ -73,6 +88,7 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
     additionalFilterIdLong: number;
     matchModeDateOptions: SelectItem[];
     matchModeNumberOptions: SelectItem[];
+    matchModeTextOptions: SelectItem[];
     /** Whether the "Add" button is shown. Defaults to `true`. */
     showAddButton: boolean;
     /** Whether the "Export to Excel" button is shown. Defaults to `true`. */
@@ -126,7 +142,7 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
      * Example: 'details' will navigate to '/details/{rowId}'.
      */
     rowNavigationPath: string;
-    constructor(router: Router, dialogService: DialogService, route: ActivatedRoute, messageService: SpiderlyMessageService, translocoService: TranslocoService, configService: ConfigServiceBase, locale: string);
+    constructor(router: Router, dialogService: DialogService, route: ActivatedRoute, messageService: SpiderlyMessageService, translocoService: TranslocoService, configService: ConfigServiceBase, errorHandler: ErrorHandler, locale: string);
     ngAfterViewInit(): void;
     /**
      * The template that renders this column's cells, or null to use the built-in rendering.
@@ -188,6 +204,36 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
     private clearHiddenColumnConstraints;
     /** Whether filter metadata (single or array) carries a real constraint, not just an empty slot. */
     private static isActiveFilterMeta;
+    /**
+     * The one home of the filter-state key rule (sort meta is keyed by `field` instead).
+     * Instance rather than static so the template's `[field]` binding can share it.
+     */
+    filterKey(col: Column): string | undefined;
+    /**
+     * The filter keys the rows on screen were actually narrowed by. Kept apart from
+     * `table.filters` because those are not the same question: PrimeNG's `onModelChange`
+     * writes each keystroke of a text/numeric filter straight into the meta and only calls
+     * `_filter()` for the auto-applying types, so `table.filters` holds PENDING edits too.
+     * Reading it for the header icon marked a column filtered the moment the operator typed
+     * a character, before Apply — claiming the grid was narrowed when it was not.
+     */
+    private appliedFilterKeys;
+    /**
+     * Whether the rows on screen are narrowed by this column — feeds the projected
+     * `filtericon` template. Why not the template's `let-hasFilter`, and why applied rather
+     * than pending state: CLAUDE.md → "Active-filter header icon".
+     */
+    isColumnFiltered(col: Column): boolean;
+    /** Whether the column carries a constraint at all, applied or still being typed. */
+    private columnHasConstraint;
+    /**
+     * Records what a just-applied filter set narrows by. Called from every path that commits
+     * one: `(onFilter)` (Apply, auto-apply, a per-column Clear), `lazyLoad` (which also covers
+     * `table.clear()` — it re-queries WITHOUT emitting onFilter), the caption's Clear filters,
+     * and once from `ngOnInit` off persisted state, so a restored filter is marked on first
+     * paint rather than after the first response.
+     */
+    private snapshotAppliedFilters;
     private persistColumnVisibility;
     private restoreColumnVisibility;
     /**
@@ -219,8 +265,40 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
      * declares no column for.
      */
     private keepSortableMeta;
+    /**
+     * The filter twin of `keepSortableMeta` — persisted state outlives the rule that produced
+     * it, here a match mode stored before the column declared `matchModes`. It has to REWRITE
+     * storage rather than filter a value on the way past: `ColumnFilter.ngOnInit` skips
+     * `initFieldFilterConstraint()` whenever the field already carries a constraint, so our
+     * `[matchMode]` never applies to a restored one. Left alone, the column keeps filtering by
+     * a mode it no longer offers while its match-mode `<p-select>` renders blank (the stored
+     * value is not among the options). Runs before PrimeNG's `restoreState()`, which reads this
+     * same key on the first `[value]` change.
+     *
+     * Deliberately narrow: it touches only constraints whose mode the declaring column no
+     * longer offers, so every other byte of the persisted blob survives.
+     */
+    private reconcilePersistedMatchModes;
     private applyDefaultSortIfUnsorted;
+    onPageChange(container: HTMLElement): void;
+    /**
+     * The one pending predicate: PrimeNG's overlay and the container's `aria-busy` must never
+     * disagree about whether a fetch is in flight.
+     *
+     * It used to also test `items === undefined`, for the first load. That clause is dead now
+     * that `loading` initialises true and every lazyLoad raises it — except in the one state
+     * where it was actively wrong: a FAILED first load lowers the flag with `items` still
+     * undefined, which pinned the overlay up forever. Same stranded overlay this component was
+     * fixed for once already, through the other door.
+     */
+    get isPending(): boolean;
     lazyLoad(event: TableLazyLoadEvent): void;
+    /**
+     * Repaints the checkbox column for the page that just landed. Split out of the subscriber so
+     * the try/finally that guarantees the pending flag wraps an await, not fifty lines of
+     * selection algebra.
+     */
+    private reconcileSelectionForLoadedPage;
     clientLoad(): void;
     private clientFilterCount;
     filter(event: TableFilterEvent): void;
@@ -233,11 +311,60 @@ export declare class SpiderlyDataTableComponent implements OnInit, OnChanges, Af
      * sort fields are rejected with a 400, a clickable header here would be a guaranteed error toast.
      */
     isColumnSortable(col: Column): boolean;
-    /** The column's declared {@link Column.minWidth}, or the default for its filter type. */
-    getColHeaderWidth(col: Column): string;
-    getColMatchModeOptions(filterType: string): SelectItem<any>[];
-    getColMatchMode(filterType: string): any;
+    /**
+     * The column's declared {@link Column.width}, or the default for its filter type.
+     *
+     * A width, not a minimum: under the fixed layout {@link tableStyle} establishes, this is what
+     * the column is sized from, and the table shares its surplus in PROPORTION to these numbers.
+     * Columns declaring none would otherwise take an equal share, which throws away what the
+     * per-type defaults say — a boolean holds "Da"/"Ne", a text column holds a name.
+     */
+    getColWidth(col: Column): string;
+    /**
+     * Memo for the resolution below. Two jobs: the narrowing maps to a NEW array and a
+     * template binding must not hand PrimeNG a fresh reference every CD pass, and both
+     * halves (offered list, default mode) must come from ONE computation so they cannot
+     * disagree. Keyed on the declared array's identity, so reassigning `col.matchModes`
+     * recomputes — note PrimeNG itself reads `matchModeOptions` only in its own `ngOnInit`,
+     * so a post-init change still never reaches the rendered dropdown.
+     */
+    private matchModeResolutions;
+    getColMatchModeOptions(col: Column): SelectItem[] | null;
+    getColMatchMode(col: Column): any;
+    private resolveMatchModes;
+    /**
+     * Applies `Column.matchModes`, and refuses to half-apply it. Both ways a declaration can
+     * be wrong are consumer mistakes that PrimeNG would otherwise turn into a broken filter
+     * rather than an error: it reads `matchModeOptions || <type defaults>`, so handing it
+     * `[]` renders an EMPTY dropdown (an empty array is truthy) while the default mode still
+     * seeds the constraint, and handing it `null` silently restores PrimeNG's own list. So an
+     * unusable narrowing falls back to the full list and says so, instead of shipping a
+     * dropdown the user cannot pick from.
+     */
+    private computeMatchModes;
+    private matchModeOptionsForType;
+    private defaultMatchModeForType;
     isDropOrMulti(filterType: string): boolean;
+    /**
+     * Whether the filter type applies on every value change, which hides the menu's Apply
+     * button — an Apply there would promise a pending state that cannot exist. Boolean
+     * auto-applies through PrimeNG's own `onModelChange`; date and dropdown/multiselect
+     * through the filter templates THIS component projects, which call `filterCallback`
+     * directly (PrimeNG's built-in element, and with it its `onModelChange`, is only
+     * rendered when no template is projected — so the date path is ours, not PrimeNG's).
+     * With showApplyButton off, PrimeNG also auto-applies match-mode, operator and
+     * constraint-removal changes, so the whole menu stays consistent. Typed input
+     * (text/numeric) is deliberately NOT here — it commits on Enter/Apply, since applying
+     * per keystroke would fire a lazy load per key. Listing the auto types (not the typed
+     * ones) is the safe polarity: an unlisted future type keeps its Apply button rather
+     * than silently losing its commit.
+     *
+     * Known gap this does not close, and it predates the flag: the projected date template
+     * binds `[ngModel]` one-way and commits on `(onSelect)`, which the datepicker raises for
+     * a calendar pick but not for `onUserInput` — so a date TYPED into the field never
+     * reaches the constraint at all, with or without an Apply button.
+     */
+    filterAppliesOnChange(filterType: string): boolean;
     navigateToDetails(rowId: number): void;
     /**
      * Handle row click event. Arbitration between "this click navigates the row" and "this click
@@ -332,6 +459,21 @@ export declare class Column<T = any> {
     filterType?: 'text' | 'date' | 'multiselect' | 'boolean' | 'numeric' | 'blob';
     filterPlaceholder?: string;
     showMatchModes?: boolean;
+    /**
+     * Narrows the match modes this column's filter menu offers. Declaration order is display
+     * order, and the FIRST entry becomes the column's default match mode. Omit for the filter
+     * type's full list and standard default. Example — a datetime column where an exact-equals
+     * match can never hit: `matchModes: [MatchModeCodes.GreaterThan, MatchModeCodes.LessThan]`.
+     *
+     * Read at declaration time: PrimeNG generates the dropdown once in its own `ngOnInit`, so
+     * reassigning this later never reaches the rendered menu.
+     *
+     * The OFFERED list needs `showMatchModes: true` to be visible, but the default mode applies
+     * either way — declaring `matchModes` on a column with no picker is the supported way to
+     * change just that column's default. Only modes the filter type actually has are honored;
+     * anything else is logged and ignored (`computeMatchModes`).
+     */
+    matchModes?: MatchModeCodes[];
     showAddButton?: boolean;
     dropdownOrMultiselectValues?: PrimengOption[];
     actions?: Action[];
@@ -351,12 +493,15 @@ export declare class Column<T = any> {
      */
     lockVisible?: boolean;
     /**
-     * CSS length overriding this column's default minimum width (e.g. `'8rem'`). The defaults are
-     * per filter type and sized for the HEADER — filter input plus match-mode dropdown — so they
-     * are generous for a column of short values. It is a MINIMUM, not a width: the table still
-     * distributes the leftover space.
+     * CSS length fixing this column's width (e.g. `'8rem'`). Overrides the per-filter-type default,
+     * which is sized for the HEADER — filter input plus match-mode dropdown — and so is generous
+     * for a column of short values.
+     *
+     * Declare a width on the columns that must stay NARROW and leave the flexible one undeclared:
+     * the table distributes its surplus in proportion to the declared widths, so a column carrying
+     * the long values wants the larger number, not a cap.
      */
-    minWidth?: string;
+    width?: string;
     /**
      * Fired when this column's cell is clicked. Receives a {@link CellClickEvent} with the row id,
      * the column field, the full row, the raw and formatted cell value, the clicked `<td>` element
@@ -367,13 +512,14 @@ export declare class Column<T = any> {
      * Not applied to editable cells — those belong to their inline input.
      */
     onCellClick?: (event: CellClickEvent) => void;
-    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, minWidth, onCellClick, }?: {
+    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, matchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, width, onCellClick, }?: {
         name?: string;
         field?: string & keyof T;
         filterField?: string & keyof T;
         filterType?: 'text' | 'date' | 'multiselect' | 'boolean' | 'numeric' | 'blob';
         filterPlaceholder?: string;
         showMatchModes?: boolean;
+        matchModes?: MatchModeCodes[];
         showAddButton?: boolean;
         dropdownOrMultiselectValues?: PrimengOption[];
         actions?: Action[];
@@ -383,7 +529,7 @@ export declare class Column<T = any> {
         sortable?: boolean;
         visible?: boolean;
         lockVisible?: boolean;
-        minWidth?: string;
+        width?: string;
         onCellClick?: (event: CellClickEvent) => void;
     });
 }

package/lib/components/spiderly-data-view/spiderly-data-view.component.d.ts

@@ -35,12 +35,19 @@ export declare class SpiderlyDataViewComponent<T> implements OnInit {
     clearFiltersIcon: string;
     getPaginatedListObservableMethod: (filter: Filter) => Observable<PaginatedResult>;
     lastLazyLoadEvent: TableLazyLoadEvent;
-    loading: boolean;
+    private loading;
     matchModeDateOptions: SelectItem[];
     matchModeNumberOptions: SelectItem[];
     cardBody: TemplateRef<any>;
     constructor(translocoService: TranslocoService, locale: string);
     ngOnInit(): void;
+    onPageChange(container: HTMLElement): void;
+    /**
+     * The one pending predicate: PrimeNG's overlay and the container's `aria-busy` must never
+     * disagree. Mirrors the data table's, including why it is not also testing `items`; the
+     * rationale lives there.
+     */
+    get isPending(): boolean;
     lazyLoad(event: TableLazyLoadEvent): void;
     filter(event: TableFilterEvent): void;
     getDefaultMatchMode(filterType: string): any;

package/lib/services/helper-functions.d.ts

@@ -45,3 +45,9 @@ export declare function getImageDimensions(file: File): Promise<{
     width: number;
     height: number;
 }>;
+/**
+ * Scrolls `element` back under the top of the viewport, but only when it has already scrolled
+ * above it. Set the element's `scroll-margin-top` to whatever fixed chrome must stay clear.
+ * Assumes the element's nearest scroll container is the viewport itself.
+ */
+export declare function scrollElementIntoViewIfAboveViewport(element: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spiderly",
-  "version": "19.11.8",
+  "version": "19.11.9",
   "author": "Filip Trivan",
   "license": "MIT",
   "description": "Spiderly Angular Library to use in combination with Spiderly.",

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -1,9 +1,20 @@
+@use "../../styles/layout/mixins" as *;
+
 .table-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+// The active-filter header icon (the projected filtericon template). Bare on purpose:
+// scoping it under PrimeNG's .p-datatable-column-filter-button would compile to a
+// descendant selector requiring OUR _ngcontent on the button, which is PrimeNG-rendered
+// markup — the rule would die silently. Only elements authored in this component's
+// template can match, and the icon is the only .pi-filter-fill here.
+.pi-filter-fill {
+  color: var(--p-primary-color);
+}
+
 @media (max-width: 640px) {
   .table-header {
     display: flex;
@@ -64,6 +75,11 @@
 
 :host {
   // In-template content only — rules for teleported overlay content go at top level (see above).
+
+  // onPageChange scrolls this wrapper back into view; the mixin carries the offset contract.
+  .spiderly-table-container {
+    @include scroll-target-below-top-chrome();
+  }
   // The `.clickable` affordance is shared: clickable rows (navigateOnRowClick) and opt-in cells
   // (Column.onCellClick) both get a pointer cursor; cells additionally underline on hover.
   ::ng-deep .clickable {
@@ -78,6 +94,24 @@
     user-select: none;
   }
 
+  // The cost the fixed layout would otherwise hand over: text no longer widens its column, so
+  // it wraps inside it and a long value grows the row — which pushes every row below it, a worse
+  // shift than the horizontal one the fixed layout removes. One line, ellipsis, whole value still
+  // in the DOM to select and copy.
+  //
+  // Default cell only; why it cannot reach a consumer's cell template: CLAUDE.md → Column widths.
+  .cell-text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // PrimeNG-rendered markup, so ::ng-deep is the only way in; the mixin carries the contract.
+  ::ng-deep .p-datatable-mask {
+    @include table-pending-veil();
+  }
+
   ::ng-deep {
     .p-datatable-thead {
       position: unset !important;

package/styles/components/spiderly-data-view/spiderly-data-view.component.scss

@@ -1,3 +1,19 @@
+@use "../../styles/layout/mixins" as *;
+
+:host {
+  // onPageChange scrolls this wrapper back into view; the mixin carries the offset contract.
+  .spiderly-table-container {
+    @include scroll-target-below-top-chrome();
+  }
+
+  // PrimeNG-rendered markup, so ::ng-deep is the only way in. Kept under :host deliberately:
+  // the block further down is at SCSS top level, which strips encapsulation entirely and leaks
+  // its rules to every component in the consuming app. Do not extend that one.
+  ::ng-deep .p-datatable-mask {
+    @include table-pending-veil();
+  }
+}
+
 ::ng-deep {
   .p-datatable-tbody {
     display: flex;

package/styles/styles/layout/_content.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding: 7rem 2rem 2rem 4rem;
+  padding: calc(var(--spiderly-topbar-height) + 2rem) 2rem 2rem 4rem;
   transition: margin-left $transitionDuration;
 }
 

package/styles/styles/layout/_main.scss

@@ -4,10 +4,24 @@
   box-sizing: border-box;
 }
 
+// Declared through :where() so both vars carry ZERO specificity: a consumer's own
+// `html { --spiderly-… }` then wins wherever it sits in the cascade, instead of the override
+// working or not depending on stylesheet order. Full contract, and the fallback rule
+// components must follow: Angular/CLAUDE.md → fixed-chrome offset.
+:where(html) {
+  // Two names because they are two quantities that merely coincide in THIS shell: the topbar's
+  // own height, and how much fixed chrome covers the top of the viewport. A shell that pins a
+  // second bar under the topbar raises the inset without stretching the topbar.
+  --spiderly-topbar-height: 5rem;
+  --spiderly-viewport-top-inset: var(--spiderly-topbar-height);
+}
+
 html {
   height: 100%;
   font-size: $scale;
-  scroll-behavior: smooth;
+
+  // No `scroll-behavior` here, deliberately (2026-08-29) — the argument against re-adding it
+  // is in Angular/CLAUDE.md → fixed-chrome offset.
 }
 
 body {

package/styles/styles/layout/_menu.scss

@@ -8,7 +8,7 @@
   z-index: 999;
   overflow-y: auto;
   user-select: none;
-  top: 7rem;
+  top: calc(var(--spiderly-topbar-height) + 2rem);
   left: 2rem;
   transition:
     transform $transitionDuration,

package/styles/styles/layout/_mixins.scss

@@ -11,3 +11,36 @@
   transition: box-shadow 0.2s;
   box-shadow: inset 0 0 0 0.2rem var(--p-primary-400);
 }
+
+// Marks an element as a scroll-into-view target that must clear the shell's fixed top chrome.
+// This is the ONE declaration of that offset: scrollElementIntoViewIfAboveViewport reads the
+// computed value back rather than taking a number, so nothing in TypeScript knows the shell's
+// dimensions. The 0px fallback is what stops a consumer running its own shell (no
+// --spiderly-viewport-top-inset declared) from getting a phantom gap above the element.
+@mixin scroll-target-below-top-chrome() {
+  scroll-margin-top: calc(var(--spiderly-viewport-top-inset, 0px) + 1rem);
+}
+
+// The overlay PrimeNG mounts over a table while a fetch is in flight (.p-datatable-mask).
+// Its own theme token is a modal-strength scrim -- rgba(0,0,0,0.4) light, 0.6 dark -- which
+// makes the rows underneath unreadable. Since the whole point of keeping the previous page on
+// screen during a refetch is that it stays READABLE, the scrim is replaced by a light veil.
+// Three parts, each load-bearing:
+// - `color`, because SpinnerIcon paints fill="currentColor". Overriding only the background
+//   leaves a near-white spinner on a near-white veil.
+// - `flex-start` plus a top pad, because the mask spans the whole datatable root: a centred
+//   spinner on a long list sits far below the fold, worst right after a page change has
+//   scrolled the reader to the table's top. The pad is deliberately approximate -- it only has
+//   to land the spinner inside the first screenful, not on any particular row. `position:
+//   sticky` was tried and cannot work here: the icon's containing block IS the mask.
+// - A fallback on every var: Karma loads no PrimeNG theme, and a consumer need not either.
+@mixin table-pending-veil() {
+  background: color-mix(
+    in srgb,
+    var(--p-content-background, #ffffff) 65%,
+    transparent
+  );
+  color: var(--p-primary-color, #334155);
+  align-items: flex-start;
+  padding-top: 6rem;
+}

package/styles/styles/layout/_topbar.scss

@@ -3,7 +3,7 @@
 
 .layout-topbar {
   position: fixed;
-  height: 5rem;
+  height: var(--spiderly-topbar-height);
   z-index: 997;
   left: 0;
   top: 0;
@@ -136,7 +136,7 @@
       border-radius: var(--p-content-border-radius);
       padding: 1rem;
       right: 2rem;
-      top: 5rem;
+      top: var(--spiderly-topbar-height);
       min-width: 15rem;
       display: none;
       -webkit-animation: scalein 0.15s linear;
@@ -181,7 +181,7 @@
   border-radius: var(--p-content-border-radius);
   padding: 1rem;
   right: 2rem;
-  top: 5rem;
+  top: var(--spiderly-topbar-height);
   min-width: 15rem;
   -webkit-animation: scalein 0.15s linear;
   animation: scalein 0.15s linear;
@@ -196,7 +196,7 @@
   @media (max-width: 991px) {
     width: 210px;
     right: 1rem;
-    top: 4.5rem;
+    top: calc(var(--spiderly-topbar-height) - 0.5rem);
   }
 
   .layout-topbar-profile-dropdown-button {