summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFarah Rasheed <Farah.Rasheed1@dell.com>2024-06-28 18:33:55 +0300
committerSivaprabu Ganesan <sivaprabug@ami.com>2024-07-12 05:42:17 +0300
commit7f70832ae0c12656f97f7c693c2daa03fd0da22f (patch)
tree24b8a0e0886a3813b1beb1ab041ed340d3058734
parentb8a2e704bdf67a55986302f3d4ada1e707b2bb52 (diff)
downloadwebui-vue-7f70832ae0c12656f97f7c693c2daa03fd0da22f.tar.xz
Break long file name into multiple lines
In the FormFile component, break a long file name into multiple lines using the word-break CSS property. This ensures that long file names are properly displayed within their container without causing overflow issues. Fixes #121 The word-break property will allow the text to wrap onto the next line at any character, maintaining the layout integrity and improving the user interface. Change-Id: Id534dd4e8f7737a60483272f2fdd70deb7a8a002 Signed-off-by: Farah Rasheed <Farah.Rasheed1@dell.com>
-rw-r--r--src/components/Global/FormFile.vue1
1 files changed, 1 insertions, 0 deletions
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index e18d6148..50ac9614 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -107,6 +107,7 @@ export default {
display: flex;
align-items: center;
background-color: theme-color('light');
+ word-break: break-all; // break long file name into multiple lines
.btn {
width: 36px;
height: 36px;