Show Application title on mobile(#1926)

SAP · Mar 25, 2021 · 3aa684b · 3aa684b
1 parent b3fb36f
commit 3aa684b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/core/src/App.html b/core/src/App.html
@@ -1776,10 +1776,6 @@
   }
 
   @media (max-width: $desktopMinWidth) {
-    :global(.fd-shellbar__title) {
-      display: none;
-    }
-
     :global(.lui-global-nav-visible) {
       :global(#tabsContainer) {
         left: $globalNavWidth;

diff --git a/core/src/navigation/LogoTitle.html b/core/src/navigation/LogoTitle.html
@@ -14,7 +14,7 @@
 {#if title}
 {#if !hasApps}
 <span
-  class="fd-shellbar__title"
+  class="fd-shellbar__title lui-shellbar-single-app-title"
   data-testid="luigi-topnav-title"
   on:click="{() => goTo('/')}"
 >{$getTranslation(title)}</span>
@@ -239,18 +239,23 @@
     margin: 0 0.5rem;
   }
 
-  .fd-shellbar__title {
-    padding: 0 0.625rem;
-  }
-
   .fd-shellbar__logo,
   .fd-shellbar__title {
     cursor: pointer;
+    max-width: 105px; /*due to limited space on the mobile and buttons (Profile, Logo, burger etc.)*/
+  }
+
+  .lui-shellbar-single-app-title {
+    padding: 0 0.625rem;
+    max-width: 140px;
   }
 
   @media (max-width: $desktopMinWidth - 1) {
     .fd-shellbar__subtitle {
       display: none;
     }
+    .lui-shellbar-single-app-title {
+      padding-right: 0;
+    }
   }
 </style>