notid/integreat
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix(ssr): keep top bar to a fixed-height single row

Browse Source 
The top bar grew vertically on narrower viewports when the environment
badge and company-selector labels wrapped, pushing content under the
fixed navbar (which the layout offsets with a fixed pt-16).

Rework the navbar into a fixed h-16 row with a priority-based responsive
layout:
- search fills the middle (flex-1) and shrinks first when space is tight
- company selector holds its size and truncates long names
- environment badge degrades full pill -> compact letter badge -> hidden
- harmonize control heights (40px controls, 32px badge/avatar accents) so
  the search no longer renders as a cramped thin strip

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Bryce
2026-06-17 09:01:32 -07:00
parent cdc87d3710
commit 6b4392b74b
3 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/public/output.css
View File

File diff suppressed because one or more lines are too long

27
src/clj/auto_ap/ssr/company_dropdown.clj
View File

@@ -81,7 +81,7 @@
(dropdown-search-results* {:options (get-clients identity (get (:query-params request) "search-text"))}))) (dropdown-search-results* {:options (get-clients identity (get (:query-params request) "search-text"))})))
(defn dropdown [{:keys [client-selection client identity clients]}] (defn dropdown [{:keys [client-selection client identity clients]}]
[:div#company-dropdown {:x-data (hx/json {})} [:div#company-dropdown {:x-data (hx/json {}) :class "shrink-0"}
[:script [:script
(hiccup/raw (hiccup/raw
"localStorage.setItem(\"last-client-id\", \"" (:db/id client) "\")" "\n" "localStorage.setItem(\"last-client-id\", \"" (:db/id client) "\")" "\n"
@@ -93,22 +93,23 @@
:else :else
client-selection) ")")] client-selection) ")")]
[:div [:div
[:button#company-dropdown-button {:class "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" [:button#company-dropdown-button {:class "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center whitespace-nowrap dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
"x-tooltip.on.click" "{content: ()=>$refs.tooltip.innerHTML, theme: 'light', onMount(i) { htmx.process(i.popper); }, allowHTML: true, interactive:true}" "x-tooltip.on.click" "{content: ()=>$refs.tooltip.innerHTML, theme: 'light', onMount(i) { htmx.process(i.popper); }, allowHTML: true, interactive:true}"
:type "button"} :type "button"}
(cond [:span {:class "truncate max-w-[10rem] sm:max-w-[14rem]"}
(= :mine client-selection) (cond
"My Companies" (= :mine client-selection)
(= :all client-selection) "My Companies"
"All Companies" (= :all client-selection)
"All Companies"
(and client (and client
(= 1 (count clients))) (= 1 (count clients)))
(:client/name client) (:client/name client)
:else :else
(str (count clients) " Companies")) (str (count clients) " Companies"))]
[:div.w-4.h-4.ml-2 [:div.w-4.h-4.ml-2.shrink-0
svg/drop-down]] svg/drop-down]]
[:template#company-dropdown-list {:x-ref "tooltip"} [:template#company-dropdown-list {:x-ref "tooltip"}
[:div {:class "w-[300px]" [:div {:class "w-[300px]"

44
src/clj/auto_ap/ssr/components/navbar.clj
View File

@@ -7,32 +7,42 @@
[auto-ap.ssr.components.buttons :refer [icon-button-]] [auto-ap.ssr.components.buttons :refer [icon-button-]]
[auto-ap.ssr.components.user-dropdown :as user-dropdown] [auto-ap.ssr.components.user-dropdown :as user-dropdown]
[auto-ap.ssr.svg :as svg] [auto-ap.ssr.svg :as svg]
[bidi.bidi :as bidi])) [bidi.bidi :as bidi]
[clojure.string :as str]))
(defn navbar- [{:keys [client-selection client identity clients dd-env]}] (defn navbar- [{:keys [client-selection client identity clients dd-env]}]
[:nav {:class "fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"} [:nav {:class "fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"}
[:div {:class "px-3 py-3 lg:px-5 lg:pl-3"} [:div {:class "px-3 lg:px-5 lg:pl-3 h-16 flex items-center"}
[:div {:class "flex items-center justify-between"} [:div {:class "flex items-center w-full"}
[:div {:class "flex items-center justify-start"} ;; Left cluster: sidebar toggle, logo, environment badge. Holds its size.
[:button {:aria-controls "left-nav", :id "left-nav-toggle" :type "button", :class "inline-flex items-center p-2 mt-2 ml-2 mr-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" [:div {:class "flex items-center shrink-0"}
[:button {:aria-controls "left-nav", :id "left-nav-toggle" :type "button", :class "inline-flex items-center p-2 mr-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
"@click" "leftNavShow = !leftNavShow"} "@click" "leftNavShow = !leftNavShow"}
[:span {:class "sr-only"} "Open sidebar"] [:span {:class "sr-only"} "Open sidebar"]
[:svg {:class "w-6 h-6", :aria-hidden "true", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"} [:svg {:class "w-6 h-6", :aria-hidden "true", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
[:path {:clip-rule "evenodd", :fill-rule "evenodd", :d "M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"}]]] [:path {:clip-rule "evenodd", :fill-rule "evenodd", :d "M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"}]]]
[:a {:href (bidi/path-for ssr-routes/only-routes ::dashboard/page) :class "flex ml-2 hidden md:mr-24 sm:inline"} [:a {:href (bidi/path-for ssr-routes/only-routes ::dashboard/page) :class "hidden sm:flex items-center shrink-0"}
[:img {:src "/img/logo-big2.png", :class "h-10", :alt "Integreat logo"}]] [:img {:src "/img/logo-big2.png", :class "h-10 max-w-none", :alt "Integreat logo"}]]
(when-not (= "prod" dd-env) [:div.rounded-full.bg-yellow-200.text-lg.text-yellow-800.px-4.hidden.md:block.mr-8 "environment: " dd-env])] (when (and dd-env (not= "prod" dd-env))
(let [env-label (str "environment: " dd-env)]
[:div {:class "shrink-0"}
;; Full pill when there is room (md-lg and xl+); compact letter badge in the tight lg range.
[:span {:class "hidden md:inline-flex lg:hidden xl:inline-flex items-center ml-4 h-8 px-3 rounded-full bg-yellow-200 text-yellow-800 text-sm font-medium whitespace-nowrap"}
env-label]
[:span {:class "hidden lg:flex xl:hidden items-center justify-center ml-3 w-8 h-8 rounded-full bg-yellow-200 text-yellow-800 text-sm font-bold"
:title env-label}
(str/upper-case (subs dd-env 0 1))]]))]
[:div {:class "flex items-center gap-4"} ;; Search: fills the middle, grows to a comfortable max and shrinks first when space is tight.
(when (is-admin? identity)
[:button.relative.hidden.lg:block.flex-1.min-w-0.max-w-md.mx-4 {:class "bg-gray-50 hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 pl-10 h-10 pr-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
:hx-get (bidi/path-for ssr-routes/only-routes :search)}
[:div {:class "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500"}
[:div.w-4.h-4 svg/search]
[:span.ml-2 "Search"]]])
(when (is-admin? identity) ;; Right cluster: mobile search, company selector, user menu. Stays pinned right and keeps its size.
[:button.mt-1.lg:w-96.relative.hidden.lg:block {:class "bg-gray-50 hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 w-full pl-10 py-4 pr-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 gap-4 " [:div {:class "flex items-center gap-2 sm:gap-4 ml-auto shrink-0"}
:hx-get (bidi/path-for ssr-routes/only-routes :search)}
[:div {:class "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500"}
[:div.w-4.h-4 svg/search]
[:span.ml-2 "Search"]]])
[:div {:class "hidden mr-3 -mb-1 sm:block"}
[:span]]
(icon-button- (icon-button-
{:id "toggleSidebarMobileSearch", :type "button", :class "p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" {:id "toggleSidebarMobileSearch", :type "button", :class "p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
:hx-get (bidi/path-for ssr-routes/only-routes :hx-get (bidi/path-for ssr-routes/only-routes