From bf21cbf3cecc08fed5a366567b16518c7e09881f Mon Sep 17 00:00:00 2001
From: locriacyber <74560659+locriacyber@users.noreply.github.com>
Date: Thu, 9 Feb 2023 09:16:54 +0000
Subject: [PATCH] Fix text overflow in text/radio buttons (#1004)

* [frontend] Clip button text, show ellipsis on overflow

* Fix CSS rules, replicate to Vue

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
---
 .../src/components/widgets/buttons/TextButton.svelte        | 6 +++++-
 .../src/components/widgets/inputs/RadioInput.svelte         | 1 +
 frontend/src/components/widgets/buttons/TextButton.vue      | 6 +++++-
 frontend/src/components/widgets/inputs/RadioInput.vue       | 1 +
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend-svelte/src/components/widgets/buttons/TextButton.svelte b/frontend-svelte/src/components/widgets/buttons/TextButton.svelte
index c2eba2cc..9843351d 100644
--- a/frontend-svelte/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend-svelte/src/components/widgets/buttons/TextButton.svelte
@@ -41,7 +41,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		flex: 0 0 auto;
+		flex: 0 0 0;
 		height: 24px;
 		margin: 0;
 		padding: 0 8px;
@@ -84,5 +84,9 @@
 			position: relative;
 			left: -4px;
 		}
+
+		.text-label {
+			overflow: hidden;
+		}
 	}
 </style>
diff --git a/frontend-svelte/src/components/widgets/inputs/RadioInput.svelte b/frontend-svelte/src/components/widgets/inputs/RadioInput.svelte
index 438334f2..41090382 100644
--- a/frontend-svelte/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend-svelte/src/components/widgets/inputs/RadioInput.svelte
@@ -108,6 +108,7 @@
 
 		.text-label {
 			margin: 0 4px;
+			overflow: hidden;
 		}
 
 		&.combined-before button:first-of-type,
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index e7b247ff..0f39bbc3 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/frontend/src/components/widgets/buttons/TextButton.vue
@@ -20,7 +20,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	flex: 0 0 auto;
+	flex: 0 0 0;
 	height: 24px;
 	margin: 0;
 	padding: 0 8px;
@@ -63,6 +63,10 @@
 		position: relative;
 		left: -4px;
 	}
+
+	.text-label {
+		overflow: hidden;
+	}
 }
 </style>
 
diff --git a/frontend/src/components/widgets/inputs/RadioInput.vue b/frontend/src/components/widgets/inputs/RadioInput.vue
index 1e7ba3dd..3fbb1a38 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.vue
+++ b/frontend/src/components/widgets/inputs/RadioInput.vue
@@ -79,6 +79,7 @@
 
 	.text-label {
 		margin: 0 4px;
+		overflow: hidden;
 	}
 
 	&.combined-before button:first-of-type,