try to fix dashboard layout without JS

dominikks · Nov 6, 2023 · ef50bab · ef50bab
1 parent b0130f1
commit ef50bab
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.scss b/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.scss
@@ -5,7 +5,6 @@
 .main-button {
   height: 100%;
   min-width: 100%;
-  object-fit: cover;
 
   &:not(:only-child) {
     padding-right: 72px;
@@ -16,7 +15,6 @@
     align-self: stretch;
     flex-direction: column;
     text-align: center;
-    min-width: 100%;
 
     z-index: 0; // prevents the label from overlapping the preview button or filters
   }
@@ -40,6 +38,7 @@
 
 .sound-name {
   flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.ts b/frontend/src/app/soundboard/soundboard-button/soundboard-button.component.ts
@@ -22,7 +22,7 @@ export class SoundboardButtonComponent implements AfterViewInit {
   }
 
   ngAfterViewInit() {
-    this.setLabelMinWidthToFitContent();
+    //this.setLabelMinWidthToFitContent();
   }
 
   playSound(local = false) {

diff --git a/frontend/src/app/soundboard/soundboard.component.scss b/frontend/src/app/soundboard/soundboard.component.scss
@@ -87,7 +87,9 @@ main {
 
     app-soundboard-button {
       margin: 5px;
-      flex: 1 0 150px;
+      flex: 1 1 auto;
+      min-width: 200px;
+      max-width: 500px;
       min-height: 70px;
     }
   }