fix: tabs breaking mobile layout

Author: joonatank

apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/allocation/index.tsx

@@ -19,13 +19,16 @@ import {
   type ApplicationRoundNode,
   type ReservationUnitNode,
 } from "common/types/gql-types";
-import { breakpoints } from "common";
 import { base64encode, filterNonNullable } from "common/src/helpers";
 import { SearchTags } from "@/component/SearchTags";
 import Loader from "@/component/Loader";
 import BreadcrumbWrapper from "@/component/BreadcrumbWrapper";
 import { useOptions } from "@/component/my-units/hooks";
-import { Container as BaseContainer, autoGridCss } from "@/styles/layout";
+import {
+  Container as BaseContainer,
+  TabWrapper,
+  autoGridCss,
+} from "@/styles/layout";
 import { useNotification } from "@/context/NotificationContext";
 import {
   ALLOCATION_POLL_INTERVAL,
@@ -119,18 +122,6 @@ const MoreWrapper = styled(ShowAllContainer)`
   }
 `;
 
-// Tab causes horizontal overflow without this
-// because it's inside a grid so an element with fixed width and no max-width breaks the grid
-const TabWrapper = styled.div`
-  max-width: 95vw;
-  @media (width > ${breakpoints.m}) {
-    max-width: min(
-      calc(95vw - var(--main-menu-width) - 2 * var(--spacing-layout-m)),
-      var(--container-width-xl)
-    );
-  }
-`;
-
 type PriorityFilterOptions = { label: string; value: 200 | 300 };
 type PkFilterOptions = { label: string; value: number };
 

apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/review/Review.tsx

@@ -14,7 +14,7 @@ import {
   type UnitNode,
 } from "common/types/gql-types";
 import { ButtonLikeLink } from "@/component/ButtonLikeLink";
-import { Container } from "@/styles/layout";
+import { Container, TabWrapper } from "@/styles/layout";
 import { ApplicationRoundStatusTag } from "../../ApplicationRoundStatusTag";
 import TimeframeStatus from "../../TimeframeStatus";
 import { ApplicationDataLoader } from "./ApplicationDataLoader";
@@ -132,49 +132,51 @@ export function Review({ applicationRound }: ReviewProps): JSX.Element | null {
           )}
         </AlignEndContainer>
       </Header>
-      <Tabs initiallyActiveTab={activeTabIndex}>
-        <Tabs.TabList>
-          <Tabs.Tab onClick={() => handleTabChange("applications")}>
-            {t("ApplicationRound.applications")}
-          </Tabs.Tab>
-          <Tabs.Tab onClick={() => handleTabChange("events")}>
-            {t("ApplicationRound.appliedReservations")}
-          </Tabs.Tab>
-          <Tabs.Tab onClick={() => handleTabChange("allocated")}>
-            {t("ApplicationRound.allocatedReservations")}
-          </Tabs.Tab>
-        </Tabs.TabList>
-        <Tabs.TabPanel>
-          <TabContent>
-            <Filters units={unitPks} />
-            <ApplicationDataLoader
-              applicationRoundPk={applicationRound.pk ?? 0}
-            />
-          </TabContent>
-        </Tabs.TabPanel>
-        <Tabs.TabPanel>
-          <TabContent>
-            <Filters units={unitPks} statusOption="event" />
-            <ApplicationEventDataLoader
-              applicationRoundPk={applicationRound.pk ?? 0}
-            />
-          </TabContent>
-        </Tabs.TabPanel>
-        <Tabs.TabPanel>
-          <TabContent>
-            <Filters
-              units={unitPks}
-              reservationUnits={reseevationUnitOptions}
-              enableWeekday
-              enableReservationUnit
-              statusOption="eventShort"
-            />
-            <AllocatedEventDataLoader
-              applicationRoundPk={applicationRound.pk ?? 0}
-            />
-          </TabContent>
-        </Tabs.TabPanel>
-      </Tabs>
+      <TabWrapper>
+        <Tabs initiallyActiveTab={activeTabIndex}>
+          <Tabs.TabList>
+            <Tabs.Tab onClick={() => handleTabChange("applications")}>
+              {t("ApplicationRound.applications")}
+            </Tabs.Tab>
+            <Tabs.Tab onClick={() => handleTabChange("events")}>
+              {t("ApplicationRound.appliedReservations")}
+            </Tabs.Tab>
+            <Tabs.Tab onClick={() => handleTabChange("allocated")}>
+              {t("ApplicationRound.allocatedReservations")}
+            </Tabs.Tab>
+          </Tabs.TabList>
+          <Tabs.TabPanel>
+            <TabContent>
+              <Filters units={unitPks} />
+              <ApplicationDataLoader
+                applicationRoundPk={applicationRound.pk ?? 0}
+              />
+            </TabContent>
+          </Tabs.TabPanel>
+          <Tabs.TabPanel>
+            <TabContent>
+              <Filters units={unitPks} statusOption="event" />
+              <ApplicationEventDataLoader
+                applicationRoundPk={applicationRound.pk ?? 0}
+              />
+            </TabContent>
+          </Tabs.TabPanel>
+          <Tabs.TabPanel>
+            <TabContent>
+              <Filters
+                units={unitPks}
+                reservationUnits={reseevationUnitOptions}
+                enableWeekday
+                enableReservationUnit
+                statusOption="eventShort"
+              />
+              <AllocatedEventDataLoader
+                applicationRoundPk={applicationRound.pk ?? 0}
+              />
+            </TabContent>
+          </Tabs.TabPanel>
+        </Tabs>
+      </TabWrapper>
     </Container>
   );
 }

apps/admin-ui/src/styles/layout.tsx

@@ -229,3 +229,16 @@ export const Span6 = styled.div`
 export const Span12 = styled.div`
   grid-column: span 12;
 `;
+
+// Tab causes horizontal overflow without this
+// we use grids primarily and components inside grid without max-width overflow.
+// Because of side navigation we have to some silly calculations here.
+export const TabWrapper = styled.div`
+  max-width: 95vw;
+  @media (width > ${breakpoints.m}) {
+    max-width: min(
+      calc(95vw - var(--main-menu-width) - 2 * var(--spacing-layout-m)),
+      var(--container-width-xl)
+    );
+  }
+`;