Long translations overflow fix

css/components/toolbar-block.css

@@ -19,6 +19,9 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 
 .toolbar-block__list-item {

css/components/toolbar-block.pcss.css

@@ -12,6 +12,8 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
+  word-wrap: break-word;
+  hyphens: auto;
 }
 
 .toolbar-block__list-item {

css/components/toolbar-button.css

@@ -20,6 +20,7 @@
   text-align: start;
   -webkit-text-decoration: none;
   text-decoration: none;
+  word-break: break-word;
   color: var(--admin-toolbar-color-gray-800);
   border: 0;
   border-radius: var(--admin-toolbar-space-xs);

css/components/toolbar-button.pcss.css

@@ -12,6 +12,7 @@
   cursor: pointer;
   text-align: start;
   text-decoration: none;
+  word-break: break-word;
   color: var(--admin-toolbar-color-gray-800);
   border: 0;
   border-radius: var(--admin-toolbar-space-xs);

css/components/toolbar-menu.css

@@ -31,7 +31,6 @@
 .toolbar-menu__link {
   position: relative;
   display: flex;
-  inline-size: 100%;
   align-items: center;
   justify-content: space-between;
   padding: var(--admin-toolbar-space-xs) 0.625rem;
@@ -39,6 +38,7 @@
   text-align: start;
   -webkit-text-decoration: none;
   text-decoration: none;
+  word-break: break-word;
   color: var(--admin-toolbar-color-gray-800);
   border: none;
   border-radius: var(--admin-toolbar-space-xs);
@@ -46,6 +46,7 @@
   font-size: var(--admin-toolbar-font-size-xs);
   font-weight: 600;
   line-height: 1.5;
+  inline-size: 100%;
   gap: var(--admin-toolbar-space-xs);
 }
 
@@ -88,6 +89,7 @@
 
 .toolbar-menu__link[aria-expanded]::after {
   display: block;
+  flex-shrink: 0;
   content: "";
   background-color: currentColor;
   block-size: var(--admin-toolbar-space-s);

css/components/toolbar-menu.pcss.css

@@ -24,13 +24,13 @@
 .toolbar-menu__link {
   position: relative;
   display: flex;
-  inline-size: 100%;
   align-items: center;
   justify-content: space-between;
   padding: var(--admin-toolbar-space-xs) 10px;
   cursor: pointer;
   text-align: start;
   text-decoration: none;
+  word-break: break-word;
   color: var(--admin-toolbar-color-gray-800);
   border: none;
   border-radius: var(--admin-toolbar-space-xs);
@@ -38,6 +38,7 @@
   font-size: var(--admin-toolbar-font-size-xs);
   font-weight: 600;
   line-height: 1.5;
+  inline-size: 100%;
   gap: var(--admin-toolbar-space-xs);
 
   &.current {
@@ -80,6 +81,7 @@
   &[aria-expanded] {
     &::after {
       display: block;
+      flex-shrink: 0;
       content: "";
       background-color: currentColor;
       block-size: var(--admin-toolbar-space-s);