Skip to content

Mobile fixes update #1829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 8 commits into from
Jun 4, 2026
Merged

Mobile fixes update #1829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9786e0e
feat(mobile): permissions dialog as bottom sheet + policy/empty-state…
karinakharchenko Jun 2, 2026
82e4685
feat(mobile): audit feed view + sidebar/AI panel polish
karinakharchenko Jun 2, 2026
9b923bf
feat(mobile): widgets page, AI panel, sidebar polish + misc fixes
karinakharchenko Jun 2, 2026
933cfbc
feat(mobile): inline quick-filter chips with horizontal scroll + pagi…
karinakharchenko Jun 2, 2026
b44ebf2
table view: fix columns and sort by buttons in mobile version
lyubov-voloshko Jun 4, 2026
8439ccc
connection settings mobile version: fix colors inputs
lyubov-voloshko Jun 3, 2026
e2cf299
permissions: update users names and email styling
lyubov-voloshko Jun 3, 2026
fafa80a
fix(cedar): resolve ExpressionChangedAfterItHasBeenCheckedError in po…
lyubov-voloshko Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 29 additions & 3 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,34 @@
width: 60vw;
}

.main-menu-sidenav .account-section-item {
--mdc-list-list-item-label-text-size: 13px;
--mat-list-list-item-leading-icon-size: 18px;
--mdc-list-list-item-one-line-container-height: 40px;
--mdc-list-list-item-two-line-container-height: 52px;
}

.main-menu-sidenav .account-section-item .mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}

@media (width <= 600px) {
.main-menu-sidenav.mat-drawer {
top: 44px !important;
height: calc(100vh - 44px) !important;
}

.main-menu-container ::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
top: 44px !important;
}

.main-menu-sidenav mat-toolbar {
display: none !important;
}
}

.nav-bar {
position: sticky;
top: 0;
Expand Down Expand Up @@ -218,8 +246,6 @@
display: flex;
flex-direction: column;
align-items: flex-start;
border-top: var(--mat-table-row-item-outline-width, 1px) solid
var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
border-bottom: var(--mat-table-row-item-outline-width, 1px) solid
var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
margin-left: 8px;
Expand All @@ -243,7 +269,7 @@
}

.connection-navigation__upgrade-button {
margin-top: 8px;
margin-top: -12px;
margin-left: 8px;
width: calc(100% - 16px);
}
Expand Down
34 changes: 24 additions & 10 deletions frontend/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
class="main-menu-sidenav"
>
<mat-toolbar>Rocketadmin</mat-toolbar>
<mat-nav-list *ngIf="userLoggedIn === true">
<a mat-list-item routerLink="/connections-list"
<mat-nav-list *ngIf="userLoggedIn === true" (click)="drawer.close()">
<a *ngIf="!connectionID" mat-list-item routerLink="/connections-list"
routerLinkActive="nav-bar__button_active"
aria-label="List of connections">
<mat-icon matListItemIcon class="connection-navigation__icon">
Expand All @@ -21,7 +21,7 @@
{{navigationTabs[tab].caption}}
</a>
</mat-nav-list>
<a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user" data-testid="account-link-account-menu">
<a mat-list-item routerLink="/user-settings" class="connection-navigation__item_user account-section-item" data-testid="account-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon connection-navigation__icon_account"
matBadge="1" [matBadgeHidden]="currentUser.isActive"
matBadgeColor="accent" matBadgeSize="small">
Expand All @@ -30,19 +30,27 @@
<div matListItemTitle>Account</div>
<div matListItemLine>{{currentUser.email}}</div>
</a>
<a mat-list-item routerLink="/company" data-testid="company-link-account-menu">
<a mat-list-item routerLink="/company" class="account-section-item" data-testid="company-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">
apartment
</mat-icon>
<div matListItemTitle>Company</div>
</a>
<a mat-list-item routerLink="/secrets" data-testid="secrets-link-account-menu">
<a mat-list-item routerLink="/hosted-databases"
routerLinkActive="nav-bar__button_active"
aria-label="Hosted databases">
<mat-icon matListItemIcon fontSet="material-symbols-outlined" class="connection-navigation__icon">
database
</mat-icon>
<div matListItemTitle>Hosted databases</div>
</a>
<a mat-list-item routerLink="/secrets" class="account-section-item" data-testid="secrets-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">
key
</mat-icon>
<div matListItemTitle>Secrets</div>
</a>
<a mat-list-item *ngIf="isSaas" routerLink="/zapier" data-testid="zapier-link-account-menu">
<a mat-list-item *ngIf="isSaas" routerLink="/zapier" class="account-section-item" data-testid="zapier-link-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">
electric_bolt
</mat-icon>
Expand All @@ -53,17 +61,18 @@
<mat-icon fontSet="material-symbols-outlined">chat_bubble</mat-icon>
<span>Chat with support</span>
</button>
<a mat-list-item href="https://docs.rocketadmin.com/" target="_blank">
<a mat-list-item class="account-section-item" href="https://docs.rocketadmin.com/" target="_blank">
<mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-symbols-outlined">help</mat-icon>
<div matListItemTitle>Help center</div>
</a>
<mat-list-item (click)="logOut()" data-testid="logout-button-account-menu">
<mat-list-item class="account-section-item" (click)="logOut()" data-testid="logout-button-account-menu">
<mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
<div matListItemTitle>Log out</div>
</mat-list-item>
</mat-nav-list>
<a mat-flat-button color="accent" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'" class="connection-navigation__upgrade-button" routerLink="/upgrade"
routerLinkActive="nav-bar__button_active">
routerLinkActive="nav-bar__button_active"
(click)="drawer.close()">
Upgrade
</a>
</mat-sidenav>
Expand Down Expand Up @@ -93,7 +102,7 @@
class="logo__image">
<ng-template #defaultRocketLogo>
<picture>
<source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
<source *ngIf="connectionID" media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use Angular 19 control flow syntax for new code.

This new <source> element uses the deprecated *ngIf structural directive. As per coding guidelines, all new code in Angular 19 should use the built-in control flow syntax (@if) instead.

♻️ Recommended refactor to use `@if` syntax 
                        <ng-template `#defaultRocketLogo`>
                            <picture>
-                                <source *ngIf="connectionID" media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
+                                `@if` (connectionID) {
+                                    <source media="(max-width: 600px)" srcset="../assets/rocketadmin_logo_white-short.svg">
+                                }
                                <img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
                            </picture>

As per coding guidelines: "Use Angular 19's built-in control flow (@if, @for, @switch) instead of structural directives (*ngIf, *ngFor, *ngSwitch) in all new code."

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/app/app.component.html` at line 105, Replace the deprecated
structural directive used on the <source> element (the *ngIf that checks
connectionID) with Angular 19's control-flow syntax: remove the *ngIf and add an
equivalent `@if` control that evaluates connectionID, preserving the element's
media and srcset attributes and behavior; locate the <source> element in
app.component.html and apply the change so the element renders only when
connectionID is truthy using the new `@if` syntax.

<img src="../assets/rocketadmin_logo_white.svg" alt="Rocketadmin logo" class="logo__image">
</picture>
</ng-template>
Expand Down Expand Up @@ -130,6 +139,11 @@
[ngClass]="{'connection_active': connectionID === connection.connection.id}">
{{connection.displayTitle}}
</a>
<mat-divider></mat-divider>
<a mat-menu-item routerLink="/hosted-databases">
<mat-icon class="nav-menu__list-link-icon" fontSet="material-symbols-outlined">database</mat-icon>
<span>Hosted databases</span>
</a>
</ng-template>
</mat-menu>
<span *ngIf="isDemo" class="logo__demo-mark">demo</span>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
Expand Down Expand Up @@ -50,6 +51,7 @@ amplitude.getInstance().init('9afd282be91f94da735c11418d5ff4f5');
MatButtonModule,
MatBadgeModule,
MatMenuModule,
MatDividerModule,
MatTooltipModule,
Angulartics2OnModule,
FeatureNotificationComponent,
Expand Down
Loading
Loading