fix overflow behaviour

Author: danielleroux

apps/react-starter/src/App.tsx

@@ -39,7 +39,11 @@ function App() {
       <IxApplicationHeader name="Siemens Industrial Experience">
         <Logo />
         <IxAvatar username="Your user" extra="Administrator">
-          <IxDropdownItem icon={iconUserSettings} label="User Settings" onClick={showDemoMessage} />
+          <IxDropdownItem
+            icon={iconUserSettings}
+            label={t("settings.user-settings")}
+            onClick={showDemoMessage}
+          />
           <IxDropdownItem icon={iconLogOut} label="Logout" onClick={showDemoMessage} />
         </IxAvatar>
       </IxApplicationHeader>

apps/react-starter/src/hooks/mediaQuery.ts

@@ -25,3 +25,5 @@ export function useMediaQuery(query: string) {
   }, [query]);
   return matches;
 }
+
+export const useIsMobileViewPort = () => useMediaQuery("(max-width: 48em)");

apps/react-starter/src/pages/devices/components/modal/add-device-modal.tsx

@@ -122,7 +122,7 @@ export default function AddDeviceModal() {
         </form>
       </IxModalContent>
 
-      <IxModalFooter>
+      <IxModalFooter className={styles.ModalFooter}>
         <IxButton aria-label={t("device-add-modal.dismiss")} outline onClick={() => dismiss()}>
           {t("device-add-modal.dismiss")}
         </IxButton>

apps/react-starter/src/pages/devices/components/modal/styles.module.css

@@ -16,3 +16,7 @@
 .ItemFullWidth {
   grid-column: 1 / 3;
 }
+
+.ModalFooter {
+  margin-top: 1rem;
+}

apps/react-starter/src/pages/overview/components/device-range/styles.module.css

@@ -9,6 +9,8 @@
 
 .DeviceRange {
   height: 21rem;
+  min-height: 21rem;
+  max-height: 21rem;
 }
 
 .echarts {

apps/react-starter/src/pages/overview/components/incidents/overview/incident-list/index.tsx

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import useShowDemoMessage from "@/hooks/demoMessage";
-import { useMediaQuery } from "@/hooks/mediaQuery";
+import { useIsMobileViewPort } from "@/hooks/mediaQuery";
 import { iconOpenExternal, iconUpload } from "@siemens/ix-icons/icons";
 import {
   IxButton,
@@ -20,9 +20,9 @@ import {
   IxRow,
   IxTypography,
 } from "@siemens/ix-react";
+import { useTranslation } from "react-i18next";
 import { type Incident } from "../incident";
 import styles from "./styles.module.css";
-import { useTranslation } from "react-i18next";
 
 function DesktopItem({ incident }: { incident: Incident }) {
   const { t } = useTranslation();
@@ -95,7 +95,7 @@ function MobileItem({ incident }: { incident: Incident }) {
 }
 
 function IncidentList(props: { incidents: Incident[]; search: string }) {
-  const isMobile = useMediaQuery("(max-width: 48em)");
+  const isMobile = useIsMobileViewPort();
   const searchFilter = (incident: Incident) => {
     if (!props.search) {
       return true;

apps/react-starter/src/pages/overview/components/status-history/styles.module.css

@@ -9,6 +9,8 @@
 
 .StatusHistory {
   height: 21rem;
+  min-height: 21rem;
+  max-height: 21rem;
 }
 
 .echarts {

apps/react-starter/src/pages/overview/index.tsx

@@ -12,14 +12,21 @@ import { useTranslation } from "react-i18next";
 import Incidents from "./components/incidents/overview";
 import Overview from "./components/overview";
 import styles from "./styles.module.css";
+import { useIsMobileViewPort } from "@/hooks/mediaQuery";
+import clsx from "clsx";
 
 const OverviewPage = () => {
   const { t } = useTranslation();
+  const isMobile = useIsMobileViewPort();
 
   return (
     <>
       <IxContentHeader headerTitle={t("content-header")} slot="header"></IxContentHeader>
-      <section className={styles.List}>
+      <section
+        className={clsx(styles.List, {
+          [styles["h-100"]]: !isMobile,
+        })}
+      >
         <Overview></Overview>
         <Incidents></Incidents>
       </section>

apps/react-starter/src/pages/overview/styles.module.css

@@ -16,5 +16,8 @@
   flex-direction: column;
   gap: 2rem;
   overflow: hidden;
+}
+
+.List.h-100 {
   height: 100%;
 }