🎨 style(middle): Components in Middle will not overflow

MuelNova · Dec 26, 2024 · 13b3750 · 13b3750
1 parent 495155e
commit 13b3750
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/src/App.module.scss b/src/App.module.scss
@@ -26,6 +26,7 @@
 .date {
   @include barItem;
   margin: 0 0.6em;
+  padding: 0 1.5em;
 
   > *:first-child {
     > p:nth-child(1) {
@@ -55,10 +56,17 @@
 .workspace {
   @include barItem;
   height: 60%;
+  padding: 0 1.2em;
+}
+
+.media:empty {
+  display: none;
 }
 
 .media {
   @include barItem;
+  flex: 1;
+  max-width: 100%;
   margin-right: 0.6em;
 }
 

diff --git a/src/App.scss b/src/App.scss
@@ -60,6 +60,10 @@
   flex: 1;
   align-items: center;
   justify-content: center;
+
+  > div {
+    min-width: 0;
+  }
 }
 
 .left,

diff --git a/src/components/Media/Media.module.scss b/src/components/Media/Media.module.scss
@@ -1,14 +1,16 @@
 .media {
   display: flex;
   align-items: center;
-  justify-content: center;
   box-sizing: border-box;
   text-overflow: clip;
   overflow: hidden;
   white-space: nowrap;
+  max-width: 100%;
   height: 100%;
 
   .mediaInfo {
+    max-width: 90%;
+    flex-shrink: 1;
     font-size: 1.2em;
     // font-weight: bold;
     color: var(--color-text-primary);
@@ -17,6 +19,8 @@
   }
 
   .mediaControl {
+    order: -1;
+    flex-shrink: 0;
     font-size: 1.5em;
     z-index: 100;