From a6eafb965ce42812ae5e043086a52b90e5f294f9 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 12 Feb 2022 18:33:49 +0100
Subject: [PATCH] #658 - handle long account names
---
src/main/resources/static/css/accounts.css | 2 ++
src/main/resources/static/css/style.css | 15 +++++++++++++++
src/main/resources/templates/helpers/navbar.ftl | 2 +-
3 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css
index 4b04405b3..6c7d94952 100644
--- a/src/main/resources/static/css/accounts.css
+++ b/src/main/resources/static/css/accounts.css
@@ -6,11 +6,13 @@
.account-icon-big {
height: 4rem !important;
width: 4rem !important;
+ min-width: 4rem;
}
.account-icon-big .account-select-icon {
height: 4rem !important;
width: 4rem !important;
+ min-width: 4rem;
}
.account-square-border {
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index d0e2a4962..11ee274ef 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -336,10 +336,25 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
font-size: 1.1rem;
}
+.global-account-select-name {
+ max-width: 200px;
+}
+
.global-account-select-budget {
font-size: 1.8rem;
}
+.global-account-select-option {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.global-account-select-option-name {
+ font-size: 1.4rem;
+ margin-left: 2rem;
+}
+
.login-button {
text-transform: none;
}
diff --git a/src/main/resources/templates/helpers/navbar.ftl b/src/main/resources/templates/helpers/navbar.ftl
index 50b4d02c1..87d700e53 100644
--- a/src/main/resources/templates/helpers/navbar.ftl
+++ b/src/main/resources/templates/helpers/navbar.ftl
@@ -100,7 +100,7 @@
<@customSelectMacros.accountIcon selectedAccount accountName "category-circle-preview account-icon-big"/>
<div class="global-account-select-right">
- <div>${accountName}</div>
+ <div class="truncate global-account-select-name">${accountName}</div>
<div>
<#assign accountBudget = helpers.getAccountBudget()/>
--
GitLab