Fix tabs display with long labels (#2605) (#2606)

* Add tabs--allow-multiline class to handle tabs with long labels

* Use it on document concept page

Author: pwizla

docusaurus/docs/cms/api/document.md

@@ -33,7 +33,7 @@ Manipulating documents with the [Document Service API](/cms/api/document-service
 
 The following diagrams represent all the possible variations of content depending on which features, such as [Internationalization (i18n)](/cms/features/internationalization) and [Draft & Publish](/cms/features/draft-and-publish), are enabled for a content-type:
 
-<Tabs>
+<Tabs className="tabs--allow-multiline">
 <TabItem value="document-only" label="Neither i18n nor Draft & Publish enabled">
 
 <MermaidWithFallback

docusaurus/src/scss/tabs.scss

@@ -3,7 +3,6 @@
 
 // Variables
 :root body {
-  // Using variables to make future changes easier
   --custom-tabs-px: var(--strapi-spacing-5);
   --custom-tabs-py: var(--strapi-spacing-2);
   --ifm-tabs-padding-horizontal: var(--custom-tabs-px);
@@ -111,6 +110,39 @@
       }
     }
   }
+  
+  // Usage: add "tabs--allow-multiline" class to <Tabs> container
+  &.tabs--allow-multiline &__item {
+    height: auto;
+    min-height: var(--tabs-item-height);
+    max-width: 200px;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    
+    button {
+      white-space: normal !important;
+      line-height: 1.3;
+      height: auto !important;
+      min-height: 32px;
+      
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      width: 100%;
+      
+      // Limit to 2 lines maximum
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      
+      padding: 4px 8px;
+    }
+  }
 }
 
 /** Tabs inside Details component */