From bf923f1afe27705c2f758a68445ea81d127a4be5 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 31 Jul 2026 19:22:56 +0200
Subject: [PATCH] Task/improve style of tabs in various dialogs on mobile
 (#7481)

* Improve tabs style

* Update changelog
---
 CHANGELOG.md                                          |  3 +++
 .../account-detail-dialog/account-detail-dialog.html  |  1 +
 .../asset-profile-dialog/asset-profile-dialog.html    |  1 +
 .../holding-detail-dialog/holding-detail-dialog.html  |  1 +
 apps/client/src/styles.scss                           | 11 +++++++++++
 5 files changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d14f77f5e..62cbee836 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the tabs in the account detail dialog on mobile
+- Improved the style of the tabs in the holding detail dialog on mobile
+- Improved the style of the tabs in the asset profile dialog of the admin control panel on mobile
 - Improved the style of the empty state in the _Fear & Greed Index_ component
 - Improved the style of the type filter in the activities table component (experimental)
 - Improved the performance of the property service by caching the properties in memory
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
index 32a11717f..ff39f23b3 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
@@ -33,6 +33,7 @@
     <mat-tab-group
       animationDuration="0ms"
       class="mb-4"
+      [disablePagination]="true"
       [mat-stretch-tabs]="false"
     >
       <mat-tab>
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
index c9abdeeb7..f0b914b1c 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
@@ -105,6 +105,7 @@
 
     <mat-tab-group
       animationDuration="0ms"
+      [disablePagination]="true"
       [dynamicHeight]="true"
       [mat-stretch-tabs]="false"
     >
diff --git a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
index 464f0b6b2..c4f53497f 100644
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
@@ -39,6 +39,7 @@
     <mat-tab-group
       animationDuration="0ms"
       class="mb-4"
+      [disablePagination]="true"
       [mat-stretch-tabs]="false"
     >
       <mat-tab>
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 6ef55cb32..739af30ae 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -411,6 +411,17 @@ ngx-skeleton-loader {
   .mdc-dialog__content {
     --mat-dialog-supporting-text-color: rgba(var(--dark-primary-text));
   }
+
+  @media (max-width: 575.98px) {
+    // Tabs fill the available width on mobile
+    .mat-mdc-tab-group {
+      .mat-mdc-tab {
+        flex-grow: 1;
+        min-width: unset;
+        padding: 0 0.5rem;
+      }
+    }
+  }
 }
 
 .mat-mdc-fab,