From a873d960d17b56b941c6e65b0e964b47a00f5fd1 Mon Sep 17 00:00:00 2001
From: Miguel Cabrerizo <30386061+doncicuto@users.noreply.github.com>
Date: Mon, 17 Jun 2024 13:31:11 +0200
Subject: [PATCH] fix: show "Default settings" for small screens < 600px
 (#8144)

# Which Problems Are Solved

- For devices with screen width lower than 600 px the "Default Settings"
button is not shown unless you put the device in landscape mode

# How the Problems Are Solved

- I've modified the styles so this button is always displayed (I've
tested up to 350 px devices) but for devices width lower than 375px the
font size will be x-small. Thanks to the cog icon and the smaller text
if seems to work fine

Here are two screenshots for a 400 px device:

![Captura desde 2024-06-14
18-31-52](https://github.com/zitadel/zitadel/assets/30386061/1734dc77-312b-4c93-baa7-8d5e90ad68f3)

and a 360 px device:

![Captura desde 2024-06-14
18-32-45](https://github.com/zitadel/zitadel/assets/30386061/37876f26-e097-47af-bf06-b4cc67fcbfb8)

# Additional Context

- Closes #7574
---
 .../src/app/modules/header/header.component.scss   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/console/src/app/modules/header/header.component.scss b/console/src/app/modules/header/header.component.scss
index 04a9e53d2e..219e7d2e75 100644
--- a/console/src/app/modules/header/header.component.scss
+++ b/console/src/app/modules/header/header.component.scss
@@ -248,12 +248,16 @@
             display: none;
           }
 
-          @media only screen and (min-width: 600px) {
-            display: inline;
+          display: inline;
 
-            i {
-              margin-right: -0.5rem;
-              margin-left: 0.25rem;
+          i {
+            margin-right: -0.5rem;
+            margin-left: 0.25rem;
+          }
+
+          @media only screen and (max-width: 375px) {
+            .iam-label {
+              font-size: x-small;
             }
           }
         }