CSS fix.

src/Squidex/app/features/assets/pages/assets-page.component.html

@@ -52,11 +52,13 @@
     </ng-container>
 
     <ng-container sidebar>   
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="filtersLink">Filters</sqx-tooltip>
 
             <a class="panel-link" routerLink="filters" routerLinkActive="active" #filtersLink>
                 <i class="icon-filter"></i>
             </a>    
+        </div> 
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -124,6 +124,7 @@
         </ng-container>
 
         <ng-container sidebar>
+            <div class="panel-nav">
                 <sqx-tooltip position="leftTop" [target]="historyLink">commentsLink</sqx-tooltip>
 
                 <a class="panel-link" routerLink="comments" routerLinkActive="active" #commentsLink>
@@ -139,6 +140,7 @@
                 <sqx-onboarding-tooltip helpId="history" [for]="historyLink" position="leftTop" after="120000">
                     The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
                 </sqx-onboarding-tooltip>
+            </div>
         </ng-container>
     </sqx-panel>
 </form>

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -125,11 +125,13 @@
     </ng-container>    
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="filtersLink">Filters</sqx-tooltip>
 
             <a class="panel-link" routerLink="filters" routerLinkActive="active" #filtersLink>
                 <i class="icon-filter"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/rules/pages/rules/rules-page.component.html

@@ -76,6 +76,7 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">Events</sqx-tooltip>
 
             <a class="panel-link panel-link-gray" routerLink="events" routerLinkActive="active" #historyLink>
@@ -91,6 +92,7 @@
             <sqx-onboarding-tooltip helpId="help" [for]="helpLink" position="leftTop" after="180000">
                 Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" sqxExternalLink>https://docs.squidex.io</a> for the full documentation.
             </sqx-onboarding-tooltip>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -82,11 +82,13 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
         
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/backups/backups-page.component.html

@@ -93,11 +93,13 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
         
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -47,6 +47,7 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
             <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
@@ -58,6 +59,7 @@
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -73,6 +73,7 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
             <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
@@ -84,6 +85,7 @@
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/languages/languages-page.component.html

@@ -43,6 +43,7 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
             <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
@@ -54,6 +55,7 @@
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html

@@ -25,6 +25,7 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
             <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
@@ -36,6 +37,7 @@
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/plans/plans-page.component.html

@@ -79,11 +79,13 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
         
             <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
                 <i class="icon-time"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/features/settings/pages/roles/roles-page.component.html

@@ -38,6 +38,7 @@
     </ng-container>
 
     <ng-container sidebar>
+        <div class="panel-nav">
             <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
             <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
@@ -49,6 +50,7 @@
             <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
                 <i class="icon-help"></i>
             </a>
+        </div>
     </ng-container>
 </sqx-panel>
 

src/Squidex/app/theme/_panels.scss

@@ -40,6 +40,7 @@
         height: 100%;
         background: $color-background;
         border-right: 1px solid $color-border;
+        position: relative;
     }
 
     // First row of the panel with the header. Fixed height.
@@ -74,6 +75,7 @@
         @include flex-box;
         @include flex-flow(row);
         @include flex-grow(1);
+        overflow: hidden;
     }
 
     // First column of the main row (second row) with the main content.
@@ -157,6 +159,12 @@
             max-width: 16rem;
         }
 
+        & .panel-nav {
+            min-width: $panel-sidebar;
+            max-width: $panel-sidebar;
+            position: absolute;
+        }
+
         & .panel-link {
             & {
                 @include transition(background-color .3s ease);