Misplaced overlays and tooltips: toolbar tooltips detached, unreadable clipped field path, empty state over the toolbar, detached search icon, un-dimmed modal band

[vshvets-bc]

Five layout defects of the same kind — an element positioned against something that is not the box it is meant to sit on.

1. Manage Schemas toolbar tooltips render detached from their buttons

frontend/src/app/views/schemas/schemas.component.html:140-172

<p-button (click)="onNewInEditor()" class="toolbar-btn-primary"
    [pTooltip]="'Create a Schema'" tooltipPosition="bottom"> ... </p-button>

(same shape for Generate Excel Template :152, Import :161, Compare :169)

pTooltip on a <p-button> binds to the component host element, and PrimeNG computes the tooltip position from that host's bounding rect, which does not match the visible button — so the bubble lands well below and left of the control, over empty grid space. These also omit the tooltipStyleClass="guardian-tooltip" that the correctly-rendered tooltips elsewhere in the same file use (e.g. :355, :569-571, which are on plain elements).

2. interfaceDocumentsSourceBlock field path is clipped with no tooltip

frontend/src/app/modules/policy-engine/policy-configuration/blocks/documents/document-viewer-config/document-viewer-config.component.html:51-52

<td class="propRowCell not-editable-text">
  <span>{{ field.name }}</span>

The not-editable-text cell clips the content and the span has no tooltip binding, so a value like document.credentialSubject.0.projectId renders as document.credentialS… and cannot be read at all. The same component already uses the tooltip pattern for other labels (:22).

3. Manage Policies empty state overlaps the toolbar

frontend/src/app/modules/policy-engine/policies/policies.component.scss declares .not-exist twice:

.not-exist {           /* :120 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    ...
}
...
.not-exist {           /* :923 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    ...
}

The later rule wins for the properties they share, but position: absolute only appears in the first, so it survives — the empty state is lifted out of flow and renders on top of the toolbar action buttons. The second rule already centres it with flex, so the first contributes nothing except the overlap.

4. Relayer Accounts search icon renders detached below-left of the input

frontend/src/app/views/relayer-accounts/relayer-accounts.component.scss:104-114

.search-filter {
    width: 400px;
    position: relative;
    .search-icon { position: absolute; right: 12px; top: 12px; }
}

The wrapper has no layout of its own and the icon is placed with a magic top: 12px that assumes a 40px input, so the icon detaches from the input rather than sitting inside it.

5. Add Credential modal leaves an un-dimmed band

frontend/src/app/components/credentials/credentials-panel/credentials-panel.component.html:154

<p-dialog header="Add Credential" [(visible)]="showDialog" [modal]="true" [style]="{width:'500px'}" [closable]="true">

With no appendTo, the modal mask is created next to the dialog inside the page layout, so it covers only that container — leaving a white, un-dimmed band across the bottom of the page. The other p-dialog usages in the app append to body.