Change UI for Ipad

src/components/Accordion/Accordion.module.scss

@@ -4,8 +4,9 @@
   border: 0.1vh solid var(--green);
   display: flex;
   flex-direction: column;
-  height: 100%;
-  overflow: auto;
+  // height: 100%;
+  // overflow: hidden;
+  // -webkit-overflow-scrolling: touch;
   width: 100%;
 }
 

src/components/Accordion/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import Button from '../Button'
 import Title from '../Title'
 import styles from './Accordion.module.scss'
@@ -111,6 +111,20 @@ const Accordion: FC<IAccordionProps> = ({ items, subtitle, subtitleRight }) => {
     ) : null
   }
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollUp = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({ top: -100, behavior: 'smooth' });
+    }
+  };
+
+  const scrollDown = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({ top: 100, behavior: 'smooth' });
+    }
+  };
+
   return !loading ? (
     <>
       <div className={styles.SubtitleContainer}>
@@ -123,7 +137,15 @@ const Accordion: FC<IAccordionProps> = ({ items, subtitle, subtitleRight }) => {
           </Title>
         )}
       </div>
-      <div className={styles.Accordion}>{items.map((item, index) => renderItem(item, index, '', !!item.children))}</div>
+      <div className={styles.Accordion} ref={scrollContainerRef}>
+        {items.map((item, index) => renderItem(item, index, '', !!item.children))}
+        <button className="scrollButtonUp" onClick={scrollUp}>
+          ▲
+        </button>
+        <button className="scrollButtonDown" onClick={scrollDown}>
+          ▼
+        </button>
+      </div>
     </>
   ) : null
 }

src/components/CustomTable/CustomTable.module.scss

@@ -1,6 +1,8 @@
 .Container {
+  height: 100%;
   margin: var(--spacing-1) 0 0;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .Table {

src/components/Layout/Default.module.scss

@@ -2,7 +2,8 @@
 
 .BgContainer {
   align-items: center;
-  background: url('../../../public/sky_bg.jpg') 0 100%;
+  // background: url('../../../public/sky_bg.jpg') 0 100%;
+  background: #000;
   background-size: cover;
   display: flex;
   height: 100%;
@@ -96,10 +97,14 @@
   display: flex;
   flex-direction: column;
   height: 95%;
-  overflow: auto;
+  overflow: hidden;
   width: 100%;
 }
 
+.InnerContainer::-webkit-scrollbar {
+  width: 20px; 
+}
+
 .Footer {
   margin: var(--spacing-0) 0;
 }

src/components/Layout/index.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlaneCircleCheck } from "@fortawesome/free-solid-svg-icons";
 import Navbar, { NavBarButtonType } from "../NavBar";
@@ -9,17 +9,32 @@ import { useAppFrameStatus } from "../../lib/appframe/hook";
 
 type DefaultLayoutProps = {
 	showNavBar?: boolean;
+	hideArrows?: boolean;
 	navBarButtons?: NavBarButtonType[];
 	footer?: React.ReactNode;
 };
 
 const DefaultLayout: React.FC<PropsWithChildren<DefaultLayoutProps>> = ({
 	children,
 	showNavBar,
+	hideArrows,
 	navBarButtons,
 	footer,
 }) => {
 	const { maintenanceSwitch, updateMaintenanceSwitch } = useAppFrameStatus();
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+	const scrollUp = () => {
+		if (scrollContainerRef.current) {
+		scrollContainerRef.current.scrollBy({ top: -100, behavior: 'smooth' });
+		}
+	};
+
+	const scrollDown = () => {
+		if (scrollContainerRef.current) {
+		scrollContainerRef.current.scrollBy({ top: 100, behavior: 'smooth' });
+		}
+	};
 
 	const outerClass = clsx(
 		styles.OuterContainer,
@@ -55,7 +70,19 @@ const DefaultLayout: React.FC<PropsWithChildren<DefaultLayoutProps>> = ({
 						{showNavBar && <Navbar buttons={navBarButtons} />}
 
 						<main id="main" className={styles.MainContent}>
-							<div className={styles.InnerContainer}>{children}</div>
+							<div className={styles.InnerContainer} ref={scrollContainerRef}>
+								{children}
+								{ !hideArrows && 
+									<>
+										<button className="scrollButtonUp" onClick={scrollUp}>
+											▲
+										</button>
+										<button className="scrollButtonDown" onClick={scrollDown}>
+											▼
+										</button>
+									</>
+								}
+							</div>
 
 							{footer && <div className={styles.Footer}>{footer}</div>}
 						</main>

src/components/Table/Table.module.scss

@@ -1,8 +1,6 @@
 @import '../../styles/common';
 
 .Container {
-  height: 100%;
-  overflow: auto;
   width: 100%;
 }
 

src/pages/ExtendedMaintenance/ExtendedMaintenance.tsx

@@ -10,7 +10,7 @@ const ExtendedMaintenance = () => {
   }, [])
 
   return (
-    <DefaultLayout>
+    <DefaultLayout hideArrows>
       <Title>Extended Maintenance</Title>
       <Menu>
       <Button>Storage disabled, press to enable</Button>

src/pages/Home.tsx

@@ -23,7 +23,7 @@ const HomePage = () => {
   }
 
   return (
-    <DefaultLayout footer={<Footer>Fault History Database Currently&nbsp;XXX&nbsp;%Full</Footer>}>
+    <DefaultLayout hideArrows footer={<Footer>Fault History Database Currently&nbsp;XXX&nbsp;%Full</Footer>}>
       <Title>CMC Main mENU</Title>
       <Menu>
         <Button href="/maintenancemessages">Maintenance Messages</Button>

src/pages/MaintenanceMessages/MaintenanceMessages.tsx

@@ -10,7 +10,7 @@ const MaintenanceMessagesPage = () => {
   }, [])
 
   return (
-    <DefaultLayout>
+    <DefaultLayout hideArrows>
       <Title>Maintenance Messages</Title>
       <Menu>
         <Button href="/maintenancemessages/active">Active</Button>

src/styles/global.scss

@@ -250,13 +250,13 @@ a {
 /* Firefox */
 * {
   scrollbar-color: var(--scrollbar-color) var(--page-bg);
-  scrollbar-width: thin;
 }
 /* Chrome, Edge, and Safari */
 ::-webkit-scrollbar {
   background: transparent;
   height: rem(4px);
-  width: var(--spacing--3);
+  width: var(--spacing--1);
+  -webkit-overflow-scrolling: touch;
 }
 
 ::-webkit-scrollbar-track {
@@ -267,3 +267,37 @@ a {
   background-color: var(--scrollbar-color);
   border-radius: 0;
 }
+
+.scrollButtonUp {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100;
+  top: 40%;
+  right: 15px;
+}
+
+.scrollButtonDown {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100;
+  bottom: 40%;
+  right: 15px;
+}