From e9c4df26a16eab83bcc83ff94cb0e5c8c4c42e24 Mon Sep 17 00:00:00 2001
From: Lolginer <loginer@loginer.net>
Date: Tue, 21 Nov 2023 10:45:38 +0100
Subject: [PATCH] Constant navbar width

---
 src/App.jsx     | 10 +++++-----
 src/css/App.css | 10 ++++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 00c456a..573c24c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -105,14 +105,14 @@ export default class App extends Component {
               <Navbar.Toggle aria-controls="basic-navbar-nav" />
               <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="me-auto">
-                  <NavLink data-testid="tab-snapshots" className="nav-link" activeClassName="active" to="/snapshots">Snapshots</NavLink>
-                  <NavLink data-testid="tab-policies" className="nav-link" activeClassName="active" to="/policies">Policies</NavLink>
-                  <NavLink data-testid="tab-tasks" className="nav-link" activeClassName="active" to="/tasks">Tasks <>
+                  <NavLink data-testid="tab-snapshots" data-title="Snapshots" className="nav-link" activeClassName="active" to="/snapshots">Snapshots</NavLink>
+                  <NavLink data-testid="tab-policies" data-title="Policies" className="nav-link" activeClassName="active" to="/policies">Policies</NavLink>
+                  <NavLink data-testid="tab-tasks" data-title="Tasks" className="nav-link" activeClassName="active" to="/tasks">Tasks <>
                     {runningTaskCount > 0 && <>({runningTaskCount})</>}
                   </>
                   </NavLink>
-                  <NavLink data-testid="tab-repo" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
-                  <NavLink data-testid="tab-preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
+                  <NavLink data-testid="tab-repo" data-title="Repository" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
+                  <NavLink data-testid="tab-preferences" data-title="Preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
                 </Nav>
               </Navbar.Collapse>
             </Navbar>
diff --git a/src/css/App.css b/src/css/App.css
index a61e537..d9eadbb 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -107,6 +107,16 @@ body {
 #kopia .navbar-light .navbar-nav .nav-link.active,
 #kopia .navbar-light .navbar-nav .show>.nav-link {
   color: var(--color-text-nav);
+  text-align: center;
+}
+
+#kopia .navbar-light .navbar-nav .nav-link::after {
+  display: block;
+  content: attr(data-title);
+  font-weight: bold;
+  height: 0px;
+  overflow: hidden;
+  visibility: hidden;
 }
 
 #kopia .navbar-light .navbar-nav .nav-link:hover {