Tighten header and character panel vertical density

RpgRoller/Components/Pages/HomeControls/CharacterPanel.razor

@@ -32,6 +32,15 @@
         {
             <article class="skills-section">
                 <div class="section-head">
+                    <button
+                        type="button"
+                        class="chip-button"
+                        title="Edit character"
+                        disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))"
+                        @onclick="() => EditCharacterRequested.InvokeAsync(SelectedCharacter)">
+                        <span aria-hidden="true">✎</span>
+                        <span class="sr-only">Edit character</span>
+                    </button>
                     <h3 class="skills-heading">@SelectedCharacter.Name <span
                             class="muted">| Owner: @OwnerLabel(SelectedCharacter.OwnerUserId) | Campaign: @SelectedCampaign.Name</span>
                     </h3>
@@ -41,15 +50,6 @@
                             <option value="public">Public</option>
                             <option value="private">Private</option>
                         </select>
-                        <button
-                            type="button"
-                            class="chip-button"
-                            title="Edit character"
-                            disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))"
-                            @onclick="() => EditCharacterRequested.InvokeAsync(SelectedCharacter)">
-                            <span aria-hidden="true">✎</span>
-                            <span class="sr-only">Edit character</span>
-                        </button>
                     </div>
                 </div>
                 @if (SelectedCharacterSkills.Count == 0)
@@ -102,24 +102,6 @@
             </article>
         }
     }
-    <article class="last-roll">
-        <h3>Last Roll</h3>
-        @if (LastRoll is null)
-        {
-            <p class="empty">No roll yet.</p>
-        }
-        else
-        {
-            <p class="roll-total">@LastRoll.Result</p>
-            <RollDiceStrip Dice="LastRoll.Dice" AriaLabel="Last roll dice"/>
-            <p>@LastRoll.Breakdown</p>
-            <p><span
-                    class="badge @(LastRoll.Visibility == "private" ? "private-self" : "public")">@LastRoll.Visibility</span>
-                <time
-                    title="@LastRoll.TimestampUtc.ToString("O")">@LastRoll.TimestampUtc.ToLocalTime().ToString("g")</time>
-            </p>
-        }
-    </article>
 </section>
 
 <SkillFormModal

RpgRoller/Components/Pages/HomeControls/CharacterPanel.razor.cs

@@ -113,9 +113,6 @@ public partial class CharacterPanel
     [Parameter]
     public EventCallback<string> RollVisibilityChanged { get; set; }
 
-    [Parameter]
-    public RollResult? LastRoll { get; set; }
-
     [Parameter]
     public Func<Guid, string> OwnerLabel { get; set; } = _ => string.Empty;
 

RpgRoller/Components/Pages/Workspace.razor

@@ -25,8 +25,11 @@
                 {
                     <p class="header-identity"><strong>@User.DisplayName</strong> <span class="muted">(@User.Username)</span></p>
                 }
-                <p class="connection @ConnectionStateCssClass">@ConnectionStateLabel</p>
                 <p class="header-campaign">Campaign: <strong>@(SelectedCampaignName ?? "No campaign selected")</strong></p>
+                <div class="header-connection-cell">
+                    <p class="connection @ConnectionStateCssClass">@ConnectionStateLabel</p>
+                </div>
+                <a href="" class="logout-link" @onclick:preventDefault="true" @onclick="LogoutAsync">Logout</a>
                 <div class="header-menu-wrap">
                     <button
                         id="screen-menu-button"
@@ -37,7 +40,6 @@
                         aria-controls="screen-menu"
                         @onclick="ToggleScreenMenu">
                         <span aria-hidden="true">☰</span>
-                        <span class="menu-toggle-label">@CurrentScreenLabel</span>
                     </button>
                     @if (IsScreenMenuOpen)
                     {
@@ -55,7 +57,6 @@
                         </div>
                     }
                 </div>
-                <a href="" class="logout-link" @onclick:preventDefault="true" @onclick="LogoutAsync">Logout</a>
             </div>
         </header>
 
@@ -77,7 +78,6 @@
                     IsD6="IsSelectedCampaignD6"
                     RollVisibility="RollVisibility"
                     RollVisibilityChanged="OnRollVisibilityChanged"
-                    LastRoll="LastRoll"
                     OwnerLabel="OwnerLabel"
                     SkillDefinitionLabel="SkillDefinitionLabel"
                     CanEditCharacter="CanEditCharacter"

RpgRoller/wwwroot/styles.css

@@ -92,9 +92,9 @@ h3 {
 .header-row {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.7rem;
     width: 100%;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 .header-row h1 {
@@ -112,6 +112,13 @@ h3 {
     color: var(--muted);
 }
 
+.header-connection-cell {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+
 .switch-group,
 .header-actions,
 .inline-actions {
@@ -247,16 +254,19 @@ select:focus-visible {
 
 .character-picker {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.45rem;
+    flex-wrap: nowrap;
+    gap: 0.3rem;
+    overflow-x: auto;
+    padding-bottom: 0.15rem;
 }
 
 .icon-tab {
-    display: grid;
-    place-items: center;
-    gap: 0.2rem;
-    min-width: 4.8rem;
-    padding: 0.45rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    min-width: 0;
+    padding: 0.22rem 0.45rem;
+    white-space: nowrap;
     background: transparent;
     color: var(--text);
     border-color: #8e7b57;
@@ -268,21 +278,23 @@ select:focus-visible {
 }
 
 .icon-tab-glyph {
-    width: 2rem;
-    height: 2rem;
-    display: grid;
-    place-items: center;
+    width: 1.35rem;
+    height: 1.35rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border-radius: 50%;
     border: 1px solid #8e7b57;
     font-weight: 700;
+    font-size: 0.72rem;
 }
 
 .icon-tab-text {
-    font-size: 0.82rem;
+    font-size: 0.76rem;
+    line-height: 1.1;
 }
 
-.skills-section,
-.last-roll {
+.skills-section {
     border: 1px dashed #a89066;
     border-radius: 0.65rem;
     padding: 0.55rem;
@@ -377,6 +389,7 @@ select:focus-visible {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
+    margin-left: auto;
 }
 
 .visibility-control {
@@ -703,6 +716,10 @@ select:focus-visible {
         position: static;
     }
 
+    .header-row {
+        flex-wrap: wrap;
+    }
+
     .play-screen {
         grid-template-columns: 1fr;
     }