From 78996b6c6193fd968d9e16ac9de8a2ffa1e80f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 30 Jun 2026 14:51:01 +0200
Subject: [PATCH] Refactor sidebar header styles, center icon titles

---
 app/components/app-menu/about.gjs    |  4 +--
 app/components/app-menu/settings.gjs |  4 +--
 app/components/places-sidebar.gjs    | 37 +++++++++++++-------
 app/styles/app.css                   | 52 +++++++++++++++++++++++-----
 app/templates/lists/index.gjs        | 10 ++++--
 5 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/app/components/app-menu/about.gjs b/app/components/app-menu/about.gjs
index 87d13dd..59b45c9 100644
--- a/app/components/app-menu/about.gjs
+++ b/app/components/app-menu/about.gjs
@@ -3,11 +3,11 @@ import Icon from '#components/icon';
 
 <template>
   {{! template-lint-disable no-nested-interactive }}
-  <div class="sidebar-header">
+  <div class="sidebar-header has-back-btn">
     <button type="button" class="back-btn" {{on "click" @onBack}}>
       <Icon @name="arrow-left" @size={{20}} @color="#333" />
     </button>
-    <h2>About</h2>
+    <h2 class="sidebar-header-text-centered">About</h2>
     <button type="button" class="close-btn" {{on "click" @onClose}}>
       <Icon @name="x" @size={{20}} @color="#333" />
     </button>
diff --git a/app/components/app-menu/settings.gjs b/app/components/app-menu/settings.gjs
index 2271394..a3812be 100644
--- a/app/components/app-menu/settings.gjs
+++ b/app/components/app-menu/settings.gjs
@@ -21,11 +21,11 @@ export default class AppMenuSettings extends Component {
   }
 
   <template>
-    <div class="sidebar-header">
+    <div class="sidebar-header has-back-btn">
       <button type="button" class="back-btn" {{on "click" @onBack}}>
         <Icon @name="arrow-left" @size={{20}} @color="#333" />
       </button>
-      <h2>Settings</h2>
+      <h2 class="sidebar-header-text-centered">Settings</h2>
       <button type="button" class="close-btn" {{on "click" @onClose}}>
         <Icon @name="x" @size={{20}} @color="#333" />
       </button>
diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs
index f462976..0136405 100644
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -5,6 +5,8 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import eq from 'ember-truth-helpers/helpers/eq';
+import and from 'ember-truth-helpers/helpers/and';
+import not from 'ember-truth-helpers/helpers/not';
 import PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
@@ -161,7 +163,11 @@ export default class PlacesSidebar extends Component {
 
   <template>
     <div class="sidebar">
-      <div class="sidebar-header {{if this.hasHeaderPhoto 'no-border'}}">
+      <div
+        class="sidebar-header
+          {{if this.hasHeaderPhoto 'no-border'}}
+          {{if (and (not @selectedPlace) @onBack) 'has-back-btn'}}"
+      >
         {{#if @selectedPlace}}
           <button
             type="button"
@@ -176,18 +182,25 @@ export default class PlacesSidebar extends Component {
                 @color="#333"
               /></button>
           {{/if}}
-          {{#if @title}}
-            <h2><Icon
-                @name="bookmark"
-                @size={{20}}
-                @color={{or @color "#898989"}}
-              />
-              {{@title}}</h2>
-          {{else if this.isNearbySearch}}
-            <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
-              Nearby</h2>
+          {{#if @onBack}}
+            <h2 class="sidebar-header-text-centered">
+              <span class="sidebar-header-icon-wrapper">
+                <Icon
+                  @name="bookmark"
+                  @size={{20}}
+                  @color={{or @color "#898989"}}
+                />
+              </span>
+              {{@title}}
+            </h2>
           {{else}}
-            <h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
+            {{#if this.isNearbySearch}}
+              <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
+                Nearby</h2>
+            {{else}}
+              <h2><Icon @name="search" @size={{20}} @color="#333" />
+                Results</h2>
+            {{/if}}
           {{/if}}
         {{/if}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
diff --git a/app/styles/app.css b/app/styles/app.css
index 9394022..64f71ac 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -115,8 +115,6 @@ body {
   display: flex;
   align-items: center;
   grid-area: search;
-
-  /* Ensure it sits at the start of its grid area */
   justify-self: start;
   width: 100%;
 }
@@ -130,7 +128,6 @@ body {
 
 @media (width > 768px) {
   .header-left {
-    /* Desktop: Ensure minimum width for search box so it's not squeezed */
     min-width: 300px;
     max-width: 350px;
   }
@@ -143,8 +140,6 @@ body {
 
 .header-center {
   grid-area: chips;
-
-  /* Desktop: Center the chips block in the available space */
   display: flex;
   justify-content: center;
   min-width: 0; /* Allow shrinking */
@@ -159,7 +154,6 @@ body {
 }
 
 @media (width <= 768px) {
-  /* No need to reset min-width/max-width since they are only set in media query above */
   .header-center {
     width: 100%;
     overflow: hidden;
@@ -486,11 +480,13 @@ body {
 }
 
 .sidebar-header {
-  padding: 1rem;
+  height: 56px; /* Strictly enforce identical vertical height */
+  padding: 0 1rem; /* Keep horizontal padding, remove vertical padding */
   border-bottom: 1px solid var(--divider-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-sizing: border-box; /* Guarantee strict height boundaries */
 }
 
 .sidebar-header.no-border {
@@ -499,7 +495,7 @@ body {
 
 .sidebar-header h2 {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -2214,3 +2210,43 @@ button.create-place {
   white-space: nowrap;
   flex-shrink: 0;
 }
+
+/* Centered layout when back button is present */
+.sidebar-header.has-back-btn {
+  position: relative;
+  justify-content: center; /* Center horizontally */
+}
+
+/* Absolute positioning for buttons in centered header */
+.sidebar-header.has-back-btn .back-btn {
+  position: absolute;
+  left: 1rem;
+  z-index: 10;
+}
+
+.sidebar-header.has-back-btn .close-btn {
+  position: absolute;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Centralized Title text */
+.sidebar-header-text-centered {
+  position: relative;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  max-width: 60%;
+}
+
+.sidebar-header-icon-wrapper {
+  position: absolute;
+  right: 100%;
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+}
diff --git a/app/templates/lists/index.gjs b/app/templates/lists/index.gjs
index ff5e27b..58834fe 100644
--- a/app/templates/lists/index.gjs
+++ b/app/templates/lists/index.gjs
@@ -38,12 +38,16 @@ export default class ListsIndexTemplate extends Component {
   <template>
     {{#if this.mapUi.isSidebarVisible}}
       <div class="sidebar">
-        <div class="sidebar-header">
+        <div class="sidebar-header has-back-btn">
           <button type="button" class="back-btn" {{on "click" this.backToMenu}}>
             <Icon @name="arrow-left" @size={{20}} @color="#333" />
           </button>
-          <h2><Icon @name="bookmark" @size={{20}} @color="#898989" />
-            Collections</h2>
+          <h2 class="sidebar-header-text-centered">
+            <span class="sidebar-header-icon-wrapper">
+              <Icon @name="bookmark" @size={{20}} @color="#898989" />
+            </span>
+            Collections
+          </h2>
           <button type="button" class="close-btn" {{on "click" this.close}}>
             <Icon @name="x" @size={{20}} @color="#333" />
           </button>