Add styles for landscape on mobile phone.

src/App.css

@@ -167,17 +167,13 @@
 .toggleLocks {
   position: relative;
   left: 34%;
-  top: -50%;
+  /* top: -50%; */
   z-index: 2;
   width: 40px;
   display: flex;
   flex-direction: row-reverse;
 }
 
-.carModelWrapper {
-  position: absolute;
-}
-
 .temperature {
   font-size: 42px;
   font-weight: 400;
@@ -266,30 +262,30 @@
 
 .small-screen-message {
   display: none;
+  text-align: center;
+  color: #d0d0d0;
+  font-size: 20px;
+  position: relative; /* Add this */
 }
 
 .small-screen-message span {
-  font-size: 12px;
+  font-size: 14px;
+  font-style: italic;
+  display: block;
+  line-height: 14px;
+  padding-top: 7px;
 }
 
-/* Add this media query at the end of the file */
+
+/* For smaller screens but larger than mobile */
 @media screen and (max-width: 768px) {
   #root {
-    padding: 5px;
+    padding: 120px 5px;
+    height: 100dvh;
   }
 
   .small-screen-message {
-    /* position: absolute; */
-    /* bottom: 20px; */
-    /* left: 0; */
-    /* right: 0; */
     display: block;
-    text-align: center;
-    color: #d0d0d0;
-    font-size: 16px;
-    font-style: italic;
-    /* padding: 10px; */
-    /* background-color: rgba(0, 0, 0, 0.7); */
   }
 }
 
@@ -320,7 +316,38 @@
 
   .horizontalPanelGroup {
     border-radius: 0px !important;
+    height: 82% !important;
   } 
+
+  .carModelWrapper {
+    height: 60% !important;
+    width: auto !important;
+  }
+
+  .carModelStatus {
+    position: absolute;
+    top: 44px;
+    left: 49px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .carStatusIcons {
+    padding: 0.5% 1% 0.5% 10%;
+  }
+
+  .toggleLocks {
+    top: -26px;
+  }
+
+  .musicPanel {
+    height: 30% !important;
+    max-width: 322px !important;
+    position: relative;
+    left: -2px;
+  }
 }
 
 

src/App.js

@@ -14,6 +14,7 @@ import CarLock from './components/CarLock/CarLock';
 import VolumeControl from './components/VolumeControl/VolumeControl';
 import TemperatureControl from './components/TemperatureControl/TemperatureControl';
 import BatteryStatus from './components/BatteryStatus/BatteryStatus';
+import { useDots } from './utils/dots';
 import './App.css';
 
 const formatAppName = (appName) => {
@@ -38,6 +39,7 @@ function App() {
   const [isCameraForced, setIsCameraForced] = useState(false);
   const [isPanelResizable, setIsPanelResizable] = useState(false);
   const DEFAULT_LEFT_PANEL_SIZE = 40;
+  const dots = useDots();
 
   const appsTopShelf = [
     'wipers',
@@ -264,11 +266,11 @@ function App() {
             <PanelGroup autoSaveId="example" direction="horizontal" className="horizontalPanelGroup">
               <Panel 
                 defaultSize={DEFAULT_LEFT_PANEL_SIZE}
-              minSize={DEFAULT_LEFT_PANEL_SIZE}
-              maxSize={100}
-              className="leftPanel"
-              ref={leftPanelRef}
-              onResize={handleLeftPanelResize}
+                minSize={DEFAULT_LEFT_PANEL_SIZE}
+                maxSize={100}
+                className="leftPanel"
+                ref={leftPanelRef}
+                onResize={handleLeftPanelResize}
               >
                 <div className="carStatusIcons">
                   <div className="gearSelect no-select">
@@ -288,10 +290,11 @@ function App() {
                   <div className="toggleFrunk no-select" onClick={handleToggleFrunk}>
                     {rotateToFrunk ? 'Close' : 'Open'}<br /><span className="frunk">Frunk</span>
                   </div>
+                  <div className="toggleLocks"><CarLock /></div>
                   <div className="toggleTrunk no-select" onClick={handleToggleTrunk}>
                     {rotateToTrunk ? 'Close' : 'Open'}<br /><span className="trunk">Trunk</span>
                   </div>
-                  <div className="toggleLocks"><CarLock /></div>
+
                 </div>
                 <VehicleModel rotateToFrunk={rotateToFrunk} rotateToTrunk={rotateToTrunk} />
                 <MusicPanel volume={volume} />
@@ -334,7 +337,12 @@ function App() {
             </Modal>
           </div>
         </div>
-        <footer className="small-screen-message">Best viewed on a larger screen.<br /><span>(At least until I finish the mobile styles.)</span></footer>
+        <div className="small-screen-message">
+          I'm sorry Dave, I'm afraid I can't do that{dots}<br />
+          Best viewed on a larger screen.<br />
+          <span>At least until I tweak the mobile styles.<br />
+          For now, try turning your phone sideways.</span>
+        </div>
       </UserProfileProvider>
     </CarLockProvider>
   );

src/components/BtmNavBar/BtmNavBar.css

@@ -94,4 +94,16 @@
 
 .floatingBtn.squareBtn.active {
     background-color: rgba(255, 255, 255, 0.2);
+}
+
+@media screen and (max-width: 768px) {
+    .btmNavBar {
+        border-radius: 0 0 6px 6px;
+    }
+}
+
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+    .btmNavBar {
+        height: 18%;
+    }
 }

src/components/LoadingScreen/LoadingScreen.css

@@ -1,51 +1,51 @@
 .loading-screen {
-    position: relative;
-    border-radius: 3.5% / 5%;
-    border: 2px solid grey;
-    background-color: #000000;
-    box-sizing: border-box;
-    padding: 2%;
-    aspect-ratio: 16 / 9;
-    max-height: 748px;
-    margin: 0 auto 20px;
-    border-radius: 3.5% / 5%;
-    border: 2px solid grey;
-  }
+  position: relative;
+  border-radius: 3.5% / 5%;
+  border: 2px solid grey;
+  background-color: #000000;
+  box-sizing: border-box;
+  padding: 2%;
+  aspect-ratio: 16 / 9;
+  max-height: 748px;
+  margin: 0 auto 20px;
+  border-radius: 3.5% / 5%;
+  border: 2px solid grey;
+}
 
-  .displayInsideBezel {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-height: 680px;
-    background-color: rgb(17, 17, 17);
-    border-radius: 1.5% / 3%;
-  }
-
-  .tesla-logo {
-    width: 10%;
-    height: auto;
-    position: absolute;
-    /* top: 35px; */
-    animation: spinY 3s infinite linear;
-    transform-style: preserve-3d;
-  }
+.displayInsideBezel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 680px;
+  background-color: rgb(17, 17, 17);
+  border-radius: 1.5% / 3%;
+}
 
-  .loading-text {
-    margin-top: 26%;
-    margin-left: 20px;
-    color: #d0d0d0;
-    font-size: 18px;
-    text-align: center;
-  }
+.tesla-logo {
+  width: 10%;
+  height: auto;
+  position: absolute;
+  /* top: 35px; */
+  animation: spinY 3s infinite linear;
+  transform-style: preserve-3d;
+}
 
-  .dots {
-    display: inline-block;
-    width: 20px;  /* Adjust as needed */
-    text-align: left;
-  }
+.loading-text {
+  margin-top: 26%;
+  margin-left: 20px;
+  color: #d0d0d0;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dots {
+  display: inline-block;
+  width: 20px;  /* Adjust as needed */
+  text-align: left;
+}
 
 
 /* Loading Circles */
@@ -238,3 +238,26 @@
   }
 }
 
+@media screen and (max-width: 768px) {
+  .circle-container {
+    display: none;
+  }
+}
+
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+  .loading-screen {
+    aspect-ratio: unset !important;
+    background-color: none !important;
+    border: none !important;
+    border-radius: 0px !important;
+    box-shadow: none !important;
+    margin: 0px !important;
+    max-height: unset !important;
+    max-width: unset !important;
+    padding: 0px !important;
+    position: relative;
+    height: 100dvh;
+    width: 100dvw;
+    box-sizing: border-box;
+  }
+}

src/components/LoadingScreen/LoadingScreen.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { getImagePath } from '../../utils/assetPaths';
+import { useDots } from '../../utils/dots';
 import './LoadingScreen.css';
 
 const loadingMessages = [
@@ -15,7 +16,6 @@ const loadingMessages = [
   "Follow the white rabbit",
   "(Insert quarter)",
   "Counting backwards from Infinity",
-  "I'm sorry Dave, I'm afraid I can't do that.",
   "Stay awhile... and listen",
   "Computing the secret to life, the universe, and everything",
   "Downloading your daily traffic jam",
@@ -31,20 +31,11 @@ const loadingMessages = [
 
 const LoadingScreen = () => {
   const [loadingText, setLoadingText] = useState('');
-  const [dots, setDots] = useState('');
+  const dots = useDots();
 
   useEffect(() => {
     const randomIndex = Math.floor(Math.random() * loadingMessages.length);
     setLoadingText(loadingMessages[randomIndex]);
-
-    const dotInterval = setInterval(() => {
-      setDots(prevDots => {
-        if (prevDots.length >= 3) return '';
-        return prevDots + '.';
-      });
-    }, 500);
-
-    return () => clearInterval(dotInterval);
   }, []);
 
   return (
@@ -58,7 +49,7 @@ const LoadingScreen = () => {
           <div className="circle-inner"></div>
         </div>
         <img src={getImagePath('logo-grey.svg')} alt="Tesla Logo" className="tesla-logo spinning" />
-        <p className="loading-text">{loadingText}<span className="dots">{dots}</span></p>
+        <p className="loading-text">{loadingText}{dots}</p>
       </div>
     </div>
   );

src/components/MapNavigation/MapNavigation.css

@@ -248,4 +248,15 @@ input:focus {
 }
 .gmnoprint div {
     background: none !important;
+}
+
+/* Media query for mobile devices in landscape mode */
+@media only screen and (max-device-width: 896px) and (orientation: landscape) {
+    .navBtn input {
+        max-width: 138px;
+        margin-left: 0px;
+    }
+    .searchIcon {
+        margin-left: 5px;
+    }
 }