From f00ca9ba7cc20026ded4687db14dd2c5890aa326 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 1 Mar 2025 00:57:37 +0100
Subject: [PATCH] Fix layout

---
 client/src/pages/Game/Game.jsx                     |  2 +-
 .../pages/Game/components/MusicSlider/styles.sass  | 14 ++++++++++++--
 client/src/pages/Game/styles.sass                  | 14 ++++++++++++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx
index 3df6817..fe9c1f3 100644
--- a/client/src/pages/Game/Game.jsx
+++ b/client/src/pages/Game/Game.jsx
@@ -370,7 +370,7 @@ export const Game = () => {
     };
 
     return (
-        <div className="game-page">
+        <div className={`game-page ${phase === "composing" ? "with-otamatone" : ""}`}>
             <div className="background-overlay">
                 <div className="rotating-gradient"></div>
             </div>
diff --git a/client/src/pages/Game/components/MusicSlider/styles.sass b/client/src/pages/Game/components/MusicSlider/styles.sass
index 6333a4e..7f5d8a9 100644
--- a/client/src/pages/Game/components/MusicSlider/styles.sass
+++ b/client/src/pages/Game/components/MusicSlider/styles.sass
@@ -9,17 +9,19 @@
   right: 0
   bottom: 0
   padding: 20px 30px 30px 30px
-  background: rgba(20, 20, 30, 0.75)
+  background: rgba(20, 20, 30, 0.85)
   backdrop-filter: blur(15px)
   border-radius: 30px 30px 0 0
   margin: 0
-  z-index: 10
+  z-index: 100
   box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3), 0 -2px 10px rgba(255, 255, 255, 0.1)
   border-top: 1px solid rgba(255, 255, 255, 0.3)
   border-left: 1px solid rgba(255, 255, 255, 0.2)
   border-right: 1px solid rgba(255, 255, 255, 0.2)
   transition: transform 0.3s ease
   width: 100%
+  height: 100px
+  animation: slide-in-bottom 0.4s ease-out
 
 .otamatone
   display: flex
@@ -171,6 +173,14 @@
   0% 
     transform: translateY(100%)
     opacity: 0
+  100%
+    transform: translateY(0)
+    opacity: 1
+
+@keyframes slide-in-bottom
+  0%
+    transform: translateY(100%)
+    opacity: 0
   100%
     transform: translateY(0)
     opacity: 1
\ No newline at end of file
diff --git a/client/src/pages/Game/styles.sass b/client/src/pages/Game/styles.sass
index 48cec92..7c07018 100644
--- a/client/src/pages/Game/styles.sass
+++ b/client/src/pages/Game/styles.sass
@@ -10,6 +10,14 @@
   position: relative
   animation: page-fade-in 1s ease-in-out
   overflow: hidden
+
+  &.with-otamatone
+    .game-layout
+      height: calc(100vh - 280px)
+      padding-bottom: 20px
+      
+    .chat-panel
+      max-height: calc(100vh - 300px)
   
   .game-layout
     display: flex
@@ -20,6 +28,7 @@
     padding: 0 20px
     z-index: 2
     position: relative
+    transition: height 0.3s ease
 
   .main-content
     flex: 1
@@ -28,13 +37,14 @@
     display: flex
     flex-direction: column
     align-items: center
-    min-width: 0 // Fix for flex child overflow
+    min-width: 0
     margin-right: 20px
 
   // Redesigned chat panel
   .chat-panel
     width: 280px
     height: 100%
+    max-height: calc(100vh - 200px)
     background: rgba(255, 255, 255, 0.08)
     backdrop-filter: blur(10px)
     border-radius: 20px
@@ -43,7 +53,7 @@
     display: flex
     flex-direction: column
     overflow: hidden
-    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), max-height 0.3s ease
     animation: slide-in-right 0.5s ease-out
     
     .chat-header