fix: change schema name word breaking to anywhere (#743)

asyncapi · Sep 4, 2023 · 5be6cff · 5be6cff
1 parent cbbf569
commit 5be6cff
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
@@ -74,7 +74,7 @@ export const Schema: React.FunctionComponent<Props> = ({
   const styledSchemaName = isProperty ? 'italic' : '';
   const renderedSchemaName =
     typeof schemaName === 'string' ? (
-      <span className={`break-words text-sm ${styledSchemaName}`}>
+      <span className={`break-anywhere text-sm ${styledSchemaName}`}>
         {schemaName}
       </span>
     ) : (
@@ -106,7 +106,9 @@ export const Schema: React.FunctionComponent<Props> = ({
               </>
             ) : (
               <span
-                className={`break-words text-sm ${isProperty ? 'italic' : ''}`}
+                className={`break-anywhere text-sm ${
+                  isProperty ? 'italic' : ''
+                }`}
               >
                 {schemaName}
               </span>

diff --git a/library/src/styles/default.css b/library/src/styles/default.css
@@ -72,3 +72,9 @@
     @apply whitespace-pre-wrap;
   }
 }
+
+@layer utilities {
+  .break-anywhere {
+    overflow-wrap: anywhere;
+  }
+}