adjust custom window bar titles

- fix overflow
- fix positioning
- decrease text size

src/renderer/layouts/window-bar.module.css

@@ -5,8 +5,8 @@
 
 .windows-container {
     display: flex;
+    gap: 0.5rem;
     align-items: center;
-    justify-content: space-between;
     width: 100%;
     height: 100%;
     background: var(--theme-colors-background);
@@ -16,6 +16,7 @@
 
 .windows-button-group {
     display: flex;
+    flex-shrink: 0;
     width: 130px;
     height: 100%;
     -webkit-app-region: no-drag;
@@ -48,26 +49,47 @@
 
 .player-status-container {
     display: flex;
+    flex: 1;
     gap: 0.5rem;
-    max-width: 45vw;
+    align-items: center;
+    min-width: 0;
     padding-left: 1rem;
     overflow: hidden;
+}
+
+.player-status-container > img {
+    flex-shrink: 0;
+}
+
+.player-status-text {
+    flex: 1;
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.macos-container .player-status-text {
+    flex: 0 1 auto;
+    width: auto;
+    max-width: 100%;
+    text-align: center;
+}
+
 @media only screen and (width < 768px) {
     .player-status-container {
-        max-width: calc(100vw - 150px);
         padding-left: 0.5rem;
     }
 
     .windows-button-group {
+        flex-shrink: 0;
         width: 120px;
     }
 }
 
 .macos-container {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -78,6 +100,18 @@
     -webkit-app-region: drag;
 }
 
+.macos-container .player-status-container {
+    display: flex;
+    gap: 0;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    max-width: calc(100% - 140px);
+    padding: 0 0.5rem;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
 .macos-button-group {
     position: absolute;
     top: 5px;

src/renderer/layouts/window-bar.tsx

@@ -40,8 +40,10 @@ const WindowsControls = ({ controls, title }: WindowBarControlsProps) => {
     return (
         <div className={styles.windowsContainer}>
             <div className={styles.playerStatusContainer}>
-                <img alt="" height={18} src={appIcon} width={18} />
+                <img alt="" height={16} src={appIcon} style={{ flexShrink: 0 }} width={16} />
-                <Text>{title}</Text>
+                <Text className={styles.playerStatusText} overflow="hidden" size="sm">
+                    {title}
+                </Text>
             </div>
             <div className={styles.windowsButtonGroup}>
                 <div className={styles.windowsButton} onClick={handleMinimize} role="button">
@@ -116,7 +118,9 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
                 </div>
             </div>
             <div className={styles.playerStatusContainer}>
-                <Text>{title}</Text>
+                <Text className={styles.playerStatusText} overflow="hidden" size="sm">
+                    {title}
+                </Text>
             </div>
         </div>
     );