From 13b3750c2a55ae2a220d866e8b3953b634134d41 Mon Sep 17 00:00:00 2001
From: MuelNova <muel@nova.gal>
Date: Thu, 26 Dec 2024 12:41:34 +0800
Subject: [PATCH] :art: style(middle): Components in Middle will not overflow

---
 src/App.module.scss                    | 8 ++++++++
 src/App.scss                           | 4 ++++
 src/components/Media/Media.module.scss | 6 +++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.module.scss b/src/App.module.scss
index 5feb5d9..d7ba6c7 100644
--- 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
index 6d62597..d488ef3 100644
--- 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
index d8d9f5b..66827fc 100644
--- 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;