fix(portals): address search back-button review (dialog guard, RTL-safe spacing)

- showBackButton now also checks !dialogRef, so a hypothetical dialog
  opened with isGlobalSearch:false from a workspace route can't show a
  back arrow that navigates the page behind the dialog (greptile).
- Replaced the fragile negative margin with a header-title-group flex
  wrapper (gap: 4px) that keeps the arrow and title together regardless
  of the outer gap or Material padding, and is RTL-safe (greptile).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Fable 5 committed 2026-07-07 04:08:52 +02:00
1 parent 9270391f6b
commit 04743ce342
3 files changed
+26 -15

No files matched your search

@@ -7,17 +7,19 @@
<div class="header sticky-header">
<div class="header-top">
<div class="header-left">
@if (showBackButton()) {
<button
mat-icon-button
class="header-back"
[attr.aria-label]="'BACK' | translate"
(click)="onBackClick()"
>
<mat-icon>arrow_back</mat-icon>
</button>
}
<h2>{{ title() | translate }}</h2>
<div class="header-title-group">
@if (showBackButton()) {
<button
mat-icon-button
class="header-back"
[attr.aria-label]="'BACK' | translate"
(click)="onBackClick()"
>
<mat-icon>arrow_back</mat-icon>
</button>
}
<h2>{{ title() | translate }}</h2>
</div>
<!-- Filters slot -->
<div class="type-filters">
@@ -52,10 +52,16 @@
flex: 1;
flex-wrap: wrap;
// Keep the back arrow and title tightly grouped, independent of the
// wide gap between the title group and the filters (RTL-safe)
.header-title-group {
display: flex;
align-items: center;
gap: 4px;
}
.header-back {
flex-shrink: 0;
// Tighten the wide flex gap between the back arrow and the title
margin-right: -20px;
}
h2 {
@@ -496,10 +496,13 @@ export class SearchResultsComponent implements AfterViewInit {
/**
* The in-portal search is a nested view (reached from the toolbar
* search box or an actor page); the global search is a top-level
* sidebar destination, and the dialog has its own close button.
* sidebar destination, and the dialog has its own close button — a
* back arrow there would navigate the page behind the open dialog.
*/
get showBackButton(): boolean {
return this.isWorkspaceLayout && !this.isGlobalSearch;
return (
this.isWorkspaceLayout && !this.isGlobalSearch && !this.dialogRef
);
}
get minSearchLength(): number {