🔀 Merge pull request #116 from Lissy93/FIX/ui-support-long-languages

Fixes #115
[FIX] Text overflows when language is very long

.github/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 🩹 1.5.1 - UI Quick Fix [PR #116](https://github.com/Lissy93/dashy/pull/116)
+- Fixes #115 - Some longer languages (e.g. French) cause text to break to the next line
+
 ## 🔒 1.5.0 - Improve Robustness of Auth [PR #113](https://github.com/Lissy93/dashy/pull/113)
 - Use both username + password for generating token, so that a change in either will log the user out
 - Prevent privilege escalation by disallowing a user from modifying their user type through the UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "license": "MIT",
   "main": "server",
   "scripts": {

src/components/Configuration/ConfigContainer.vue

@@ -217,7 +217,8 @@ a.config-button, button.config-button {
   text-decoration: none;
   cursor: pointer;
   margin: 0.5rem auto;
-  width: 18rem;
+  min-width: 18rem;
+  width: 100%;
   svg.button-icon {
     path {
       fill: var(--config-settings-color);
@@ -236,6 +237,13 @@ a.config-button, button.config-button {
   }
 }
 
+a.hyperlink-wrapper {
+  margin: 0 auto;
+  text-decoration: none;
+  min-width: 18rem;
+  width: 100%;
+}
+
 p.app-version, p.language {
   margin: 0.5rem auto;
   font-size: 1rem;
@@ -296,17 +304,14 @@ div.code-container {
   }
 }
 
-a.hyperlink-wrapper {
-  margin: 0 auto;
-  text-decoration: none;
-}
-
 .main-options-container {
   display: flex;
   flex-direction: column;
-  padding-top: 2rem;
   background: var(--config-settings-background);
-  height: calc(100% - 2rem);
+  height: calc(100% - 4rem);
+  width: fit-content;
+  margin: 0 auto;
+  padding: 2rem 1rem;
   h2 {
     margin: 0 auto 1rem auto;
     color: var(--config-settings-color);