layout

lib/cobblemon_ui_web/live/dashboard_live.ex

@@ -141,11 +141,11 @@ defmodule CobblemonUiWeb.DashboardLive do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash}>
-      <div class="min-h-screen -mx-4 -my-20 sm:-mx-6 lg:-mx-8">
-        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="h-screen flex flex-col -mx-4 -my-20 sm:-mx-6 lg:-mx-8">
+        <div class="max-w-4xl w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col flex-1 min-h-0">
 
           <%!-- Player picker --%>
-          <div :if={is_nil(@selected_player)}>
+          <div :if={is_nil(@selected_player)} class="flex-1 overflow-y-auto py-8">
             <div class="flex items-center justify-between mb-8">
               <div class="flex items-center gap-3">
                 <div class="w-10 h-10 rounded-xl bg-primary/20 flex items-center justify-center">
@@ -193,9 +193,9 @@ defmodule CobblemonUiWeb.DashboardLive do
           </div>
 
           <%!-- Player view --%>
-          <div :if={@selected_player}>
+          <div :if={@selected_player} class="flex flex-col flex-1 min-h-0">
             <%!-- Header --%>
-            <div class="flex items-center justify-between mb-8">
+            <div class="shrink-0 py-4 border-b border-base-300/20 flex items-center justify-between">
               <div class="flex items-center gap-3">
                 <.link
                   patch={~p"/"}
@@ -220,6 +220,9 @@ defmodule CobblemonUiWeb.DashboardLive do
               </button>
             </div>
 
+            <%!-- Scrollable content --%>
+            <div class="flex-1 overflow-y-auto py-6">
+
             <div
               :if={@error}
               class="rounded-xl border border-error/30 bg-error/10 px-5 py-4 mb-6"
@@ -323,6 +326,8 @@ defmodule CobblemonUiWeb.DashboardLive do
                 tier={Map.get(@tier_list, String.downcase(@selected_pokemon.species || ""), nil)}
               />
             </div>
+
+            </div>
           </div>
 
         </div>