[Glitch] Prevent text wrapping in Badge component

Port 298fc7ce4c86fd3a723937ae47090eda3b70ddce to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/badge/index.tsx

@@ -52,8 +52,10 @@ export const Badge: FC<BadgeProps> = ({
     data-account-role-id={roleId}
   >
     {icon}
-    <span>{label}</span>
-    {domain && <span className={classes.domain}>{domain}</span>}
+    <span className={classes.content}>
+      {label}
+      {domain && <span className={classes.domain}> {domain}</span>}
+    </span>
   </div>
 );
 

app/javascript/flavours/glitch/components/badge/styles.module.scss

@@ -7,9 +7,9 @@
   gap: 4px;
   border-radius: 8px;
   align-items: center;
-  overflow-wrap: anywhere;
 
   > svg {
+    flex-shrink: 0;
     width: auto;
     height: 17px;
     fill: currentColor;
@@ -26,6 +26,12 @@
   }
 }
 
+.content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .domain {
   opacity: 0.75;
   letter-spacing: 0;

app/javascript/flavours/glitch/styles/mastodon/components.scss

@@ -10998,14 +10998,7 @@ noscript {
           }
 
           &__source {
-            overflow: hidden;
-            white-space: nowrap;
             cursor: help;
-
-            > span {
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
           }
         }