Better header layout

sleepyfran · Sep 24, 2024 · 617b9f4 · 617b9f4
1 parent 1b6b00a
commit 617b9f4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/components/command-bar/src/command-bar.ts b/packages/components/command-bar/src/command-bar.ts
@@ -13,7 +13,7 @@ export class CommandBar extends LitElement {
       border: 1px solid var(--border-color);
       background-color: var(--background-color-muted);
       font-size: 1rem;
-      width: 80%;
+      width: 95%;
     }
 
     input::placeholder {

diff --git a/packages/components/player/src/player.ts b/packages/components/player/src/player.ts
@@ -26,6 +26,12 @@ export class EchoPlayer extends LitElement {
   private _skipTrack = new EffectFn(this, () => PlayerService.skip);
 
   static styles = css`
+    .player {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
     .current-track {
       display: flex;
       align-items: center;
@@ -42,12 +48,16 @@ export class EchoPlayer extends LitElement {
       display: flex;
       flex-direction: column;
       justify-content: center;
+      max-width: 50%;
     }
 
     h4,
     h5,
     h6 {
       margin: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     h5.logo {
@@ -59,7 +69,7 @@ export class EchoPlayer extends LitElement {
     return this._player.render({
       initial: () => nothing,
       item: (player) => html`
-        <div>
+        <div class="player">
           ${Match.value(player.status).pipe(
             Match.tag("Playing", (st) => this._renderActivePlayer(player, st)),
             Match.tag("Paused", (st) => this._renderActivePlayer(player, st)),