fixed scrollbars

adessoSE · Nov 16, 2023 · aec6909 · aec6909
1 parent 471f48e
commit aec6909
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/frontend/src/app/stories-bar/stories-bar.component.css b/frontend/src/app/stories-bar/stories-bar.component.css
@@ -28,15 +28,19 @@ mat-tab-group{
   height: calc(100% - 65px);
 }
 
-.itemListDiv {
+.itemListDiv{
   height: calc(100% - 125px);
 }
 
-.itemListDivNotCustom{
+.storyListDivNotCustom{
   height: calc(100% - 110px);
 }
 
-.itemListDiv>ul{
+.storyListDivWithFilter{
+  height: calc(100% - 235px);
+}
+
+.itemListDiv>ul, .storyListDivNotCustom>ul, .storyListDivWithFilter>ul{
   height: 100%;
   overflow: scroll;
 }
@@ -335,7 +339,6 @@ a.storyListLink:hover{
     "storyList";
 }
 }
-
 .darkTheme .uk-accordion-title::before {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMThweCIgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDEzaC02djZoLTJ2LTZINXYtMmg2VjVoMnY2aDZ2MnoiLz48L3N2Zz4=);
   width: 19px;
@@ -351,6 +354,10 @@ a.storyListLink:hover{
 .darkTheme ::-webkit-scrollbar-corner{
   background: none !important;
 }
+::-webkit-scrollbar{
+  width: 10px; /* Adjust the width as needed */
+}
+
 .tab-icon{
   color: var(--brown-grey);
   margin-bottom: 12px;

diff --git a/frontend/src/app/stories-bar/stories-bar.component.html b/frontend/src/app/stories-bar/stories-bar.component.html
@@ -61,7 +61,7 @@
         </mat-form-field>
       </div>
       <hr>
-      <div [class.itemListDiv]="this.stories?.length !== 0 && isCustomStory" [class.itemListDivNotCustom]="this.stories?.length !== 0 && !isCustomStory">   
+      <div [class.itemListDiv]="this.stories?.length !== 0 && isCustomStory" [class.storyListDivNotCustom]="this.stories?.length !== 0 && !isCustomStory" [class.storyListDivWithFilter]="showFilter">   
         <ul uk-accordion (cdkDropListDropped)="dropStory($event)" cdkDropList cdkDropListLockAxis="y">
           <li *ngFor="let s of getSortedStories(); let i = index" cdkDrag > 
             <div id="storyList" (click)="selectStoryScenario(s)" class="Mediumaccordeon2 uk-accordion-title" >

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -1029,6 +1029,10 @@ a:hover {
   background: map-get($mat-brown-palette, 200);
 }
 
+.mdc-menu-surface::-webkit-scrollbar-thumb   {
+  background: none !important;
+}
+
 .darkTheme ::-webkit-scrollbar-thumb,
 .darkTheme::-webkit-scrollbar-thumb {
   background: map-get($mat-blue-gray-palette, 200) !important;