Fix filter button overlapping on mobile

config/services/module/subpanelview/top_buttons.yaml

@@ -22,7 +22,6 @@ parameters:
       labelKey: LBL_FILTER
       action: show-filter
       params:
-        collapsedMobile: true
         expanded: true
       modes:
         - list

core/app/core/src/lib/components/panel/panel.component.html

@@ -40,7 +40,7 @@
                 <ng-content select="[panel-icon-area]"></ng-content>
             </div>
 
-            <div *ngIf="title" class="pl-1 panel-title d-flex align-items-center"><div class="lh-100">{{title}}</div></div>
+            <div *ngIf="title" class="pl-1 panel-title d-inline-block align-items-center"><div class="lh-100">{{title}}</div></div>
             <div *ngIf="titleKey" class="pl-1 panel-title">
                 <scrm-label [labelKey]="titleKey"></scrm-label>
             </div>

core/app/shell/src/themes/suite8/css/components/_minimal-table.scss

@@ -211,3 +211,7 @@
     }
   }
 }
+
+.sub-panels .minimal-table .card .card-header {
+  height: 100%;
+}

core/app/shell/src/themes/suite8/css/components/_subpanel.scss

@@ -47,6 +47,19 @@
   margin-top: 0.625rem;
 }
 
+
+@media (max-width: 480px) {
+  .sub-panel .panel-buttons button.btn-outline-light {
+    scrm-label {
+      display: none;
+    }
+
+    scrm-image {
+      display: flex!important;
+    }
+  }
+}
+
 .sub-panel .panel-buttons button.btn-outline-light {
   scrm-image {
     display: none;

core/app/shell/src/themes/suite8/css/layout/_panel.scss

@@ -50,6 +50,7 @@
 
   .panel-title {
     font-size: .875rem;
+    max-width: 445px;
   }
 
   .panel-buttons button {
@@ -63,3 +64,23 @@
     max-width: 200px;
   }
 }
+
+@media (max-width: 480px) {
+  .panel-card .panel-title {
+    max-width: 95px;
+  }
+}
+
+@media (min-width: 480px) and (max-width: 576px) {
+  .panel-card .panel-title {
+    max-width: 150px;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 768px) {
+  .panel-card .panel-title {
+    max-width: 245px;
+  }
+}
+
+