solution without dropdown

Author: fpbrault

packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx

@@ -185,7 +185,7 @@ export class TabManagerBar {
 
   public render = () => {
     return (
-      <Host>
+      <Host class="overflow-x-clip overflow-y-visible">
         <slot></slot>
         <tab-popover>{this.popoverTabs}</tab-popover>
       </Host>

packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx

@@ -36,13 +36,13 @@ export class TabManagerButton {
     return (
       <Host
         role="listitem"
-        class={`${this.activeTabClass}`}
+        class={`${this.activeTabClass} max-w-[50%] sm:max-w-full`}
         aria-current={this.active ? 'true' : 'false'}
         aria-label={'tab for ' + this.label}
         part="button-container"
       >
         <button
-          class={`w-full px-6 pb-1 text-xl ${this.activeTabTextClass}`}
+          class={`w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`}
           part="tab-button"
           onClick={this.select}
         >

packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx

@@ -10,8 +10,6 @@ import {
   BindStateToController,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
-import {TabDropdown} from '../../../common/tab-manager/tab-dropdown';
-import {TabDropdownOption} from '../../../common/tab-manager/tab-dropdown-option';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
@@ -90,42 +88,20 @@ export class AtomicTabManager {
             role="list"
             aria-label="tab-area"
             part="tab-area"
-            class="mb-2 flex hidden w-full flex-row border-b sm:flex"
+            class="mb-2 flex w-full flex-row border-b"
           >
             {this.tabs.map((tab) => (
-              <Tab-Manager-Button
+              <tab-manager-button
                 active={this.tabManagerState.activeTab === tab.name}
                 label={tab.label}
                 select={() => {
                   if (!tab.tabController.state.isActive) {
                     tab.tabController.select();
                   }
                 }}
-              ></Tab-Manager-Button>
+              ></tab-manager-button>
             ))}
           </div>
-          <div class="w-full sm:hidden">
-            <TabDropdown
-              tabs={this.tabs}
-              activeTab={this.tabManagerState.activeTab}
-              onTabChange={(e) => {
-                const selectedTab = this.tabs.find(
-                  (tab) => tab.name === (e as string)
-                );
-                if (selectedTab) {
-                  selectedTab.tabController.select();
-                }
-              }}
-            >
-              {this.tabs.map((tab) => (
-                <TabDropdownOption
-                  value={tab.name}
-                  label={tab.label}
-                  isSelected={tab.name === this.tabManagerState.activeTab}
-                />
-              ))}
-            </TabDropdown>
-          </div>
         </tab-manager-bar>
       </Host>
     );