The user can layout tabs either in a row or column: 'row' or 'stack';…

pages/docs/viewer.mdx

@@ -209,9 +209,12 @@ The information panel is a collapsible panel that displays information about the
 | `options.informationPanel.renderToggle`        | `boolean`                       | No       | true    |
 | `options.informationPanel.renderContentSearch` | `boolean`                       | No       | true    |
 | `options.informationPanel.defaultTab`          | `string`                        | No       |         |
+| `options.informationPanel.tabLayout`           | `string`                        | No       | stack   |
 
 If `renderAbout` is true, Clover will use the About tab as the default tab. Use `options.informationPanel.defaultTab` to set the default tab.
 
+The `tabLayout` option can be set to either `row` or `stack` to lay out the tabs as necessary.
+
 If you want content search to be the default tab, use `manifest-content-search`
 
 ```jsx
@@ -220,6 +223,7 @@ If you want content search to be the default tab, use `manifest-content-search`
   options={{
     informationPanel: {
       defaultTab: "manifest-content-search",
+      tabLayout: "stack",
     },
   }}
 />

src/components/Viewer/InformationPanel/InformationPanel.styled.tsx

@@ -23,6 +23,9 @@ const Wrapper = styled(Tabs.Root, {
 
 const List = styled(Tabs.List, {
   display: "flex",
+  flexDirection: "var(--flex-direction)",
+  flexWrap: "var(--flex-wrap)",
+  justifyContent: "var(--justify-content)",
   flexGrow: "0",
   margin: "0 1.618rem",
   borderBottom: "4px solid #6663",

src/components/Viewer/InformationPanel/InformationPanel.tsx

@@ -56,6 +56,7 @@ export const InformationPanel: React.FC<NavigatorProps> = ({
   const { informationPanel } = configOptions;
 
   const [activeResource, setActiveResource] = useState<string>();
+  const [tabLayout, setTabLayout] = useState<Record<string, string>>();
 
   const renderAbout = informationPanel?.renderAbout;
   const renderAnnotation = informationPanel?.renderAnnotation;
@@ -160,6 +161,27 @@ export const InformationPanel: React.FC<NavigatorProps> = ({
     setActiveResource(value);
   };
 
+  useEffect(() => {
+    if (informationPanel && informationPanel.tabLayout) {
+      let displaySettings = {};
+      switch (informationPanel.tabLayout) {
+        case "row":
+          displaySettings = {
+            "--flex-direction": "row",
+            "--flex-wrap": "wrap",
+            "--justify-content": "space-between",
+          };
+          break;
+        default:
+          displaySettings = {
+            "--flex-direction": "column",
+          };
+          break;
+      }
+      setTabLayout(displaySettings);
+    }
+  }, [informationPanel]);
+
   return (
     <Wrapper
       data-testid="information-panel"
@@ -172,6 +194,7 @@ export const InformationPanel: React.FC<NavigatorProps> = ({
       <List
         aria-label={t("informationPanelTabs")}
         data-testid="information-panel-list"
+        css={tabLayout}
       >
         {renderToggle && (
           <Trigger

src/context/viewer-context.tsx

@@ -42,6 +42,7 @@ export type ViewerConfigOptions = {
       autoScroll?: AutoScrollOptions | AutoScrollSettings | boolean;
     };
     renderContentSearch?: boolean;
+    tabLayout?: string;
     defaultTab?: string;
   };
   openSeadragon?: OpenSeadragonOptions;
@@ -117,6 +118,7 @@ const defaultConfigOptions = {
     renderToggle: true,
     renderAnnotation: true,
     renderContentSearch: true,
+    tabLayout: "stack",
   },
   openSeadragon: {},
   requestHeaders: { "Content-Type": "application/json" },