moved css to styles folder

app/components/collapsibleMap.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Draggable, Map, Point } from "pigeon-maps"
 import { inputState, myColors } from "../shared/utils"
 import { useRef, useState } from "react"
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 
 export default function CollapsibleMap({ inputState, setInputState, center, setCenter }: { inputState: inputState, setInputState: React.Dispatch<React.SetStateAction<inputState>>, center: [number, number], setCenter: React.Dispatch<React.SetStateAction<[number, number]>> }) {
 

app/components/form.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import '../../node_modules/react-vis/dist/style.css';
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { formState, getWeekNumber, inputState, visualizationModes } from "../shared/utils";
 import { WeatherPlot } from "./weatherPlot";

app/components/formComparer.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import Form from "./form"
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 
 export default function FormComparer() {
     const [activeForms, setForms] = useState([0])

app/components/generateButtons.tsx

@@ -1,6 +1,6 @@
 import { getDateHistory, getMonthHistory, getOpenMeteoData, getWeekHistory } from "../shared/openMeteoInterface";
 import { formState, inputState, visualizationModes } from "../shared/utils";
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 
 export function GenerateButtons({ state, setState, inputState }: { state: formState, setState: React.Dispatch<React.SetStateAction<formState>>, inputState: inputState }) {
     return (

app/components/inputSpace.tsx

@@ -4,7 +4,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 config.autoAddCss = false
 import { inputState, myColors } from "../shared/utils"
 import CollapsibleMap from "./collapsibleMap"
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 import { faLocationCrosshairs } from "@fortawesome/free-solid-svg-icons"
 import { useState } from "react"
 
@@ -15,16 +15,24 @@ export function InputSpace({ inputState, setInputState }: { inputState: inputSta
         <div className={styles.inputSpace}>
             <form className={styles.settingForm}>
                 <button className={styles.locationButton} type="button" onClick={getUserLocation}><FontAwesomeIcon icon={faLocationCrosshairs} color={myColors.IconBlue} /> Use Location</button>
-                <label htmlFor="lat">Latitude:</label>
+                <div>
+                <label htmlFor="lat">Latitude:&nbsp;</label>
                 <input type="number" id="lat" name="lat" value={inputState.latitude} min={-90} max={90} onChange={(e) => { setInputState({ ...inputState, latitude: parseFloat(e.target.value) }) }} />
-                <label htmlFor="long">Longitude:</label>
+                </div>
+                <div>
+                <label htmlFor="long">Longitude:&nbsp;</label>
                 <input type="number" id="long" name="long" value={inputState.longitude} min={-180} max={180} onChange={(e) => { setInputState({ ...inputState, longitude: parseFloat(e.target.value) }) }} />
-                <label htmlFor="targetdate">Target Date:</label>
-                <input type="date" id="targetdate" name="targetdate" value={inputState.targetDate} min={inputState.startDate} max={inputState.endDate} onChange={(e) => { setInputState({ ...inputState, targetDate: e.target.value }) }} />
-                <label htmlFor="startdate">Interval:</label>
-                <input type="date" id="startdate" name="startdate" value={inputState.startDate} min="1940-01-01" max={inputState.endDate} onChange={(e) => { setInputState({ ...inputState, startDate: e.target.value }) }} />
-                <label htmlFor="enddate">-</label>
-                <input type="date" id="enddate" name="enddate" value={inputState.endDate} min={inputState.startDate} max={new Date().toISOString().slice(0, -14)} onChange={(e) => { setInputState({ ...inputState, endDate: e.target.value }) }} />
+                </div>
+                <div>
+                    <label htmlFor="targetdate">Target Date:&nbsp;</label>
+                    <input type="date" id="targetdate" name="targetdate" value={inputState.targetDate} min={inputState.startDate} max={inputState.endDate} onChange={(e) => { setInputState({ ...inputState, targetDate: e.target.value }) }} />
+                </div>
+                <div>
+                    <label htmlFor="startdate">Interval:&nbsp;</label>
+                    <input type="date" id="startdate" name="startdate" value={inputState.startDate} min="1940-01-01" max={inputState.endDate} onChange={(e) => { setInputState({ ...inputState, startDate: e.target.value }) }} />
+                    <label htmlFor="enddate">&nbsp;-&nbsp;</label>
+                    <input type="date" id="enddate" name="enddate" value={inputState.endDate} min={inputState.startDate} max={new Date().toISOString().slice(0, -14)} onChange={(e) => { setInputState({ ...inputState, endDate: e.target.value }) }} />
+                </div>
             </form>
             <CollapsibleMap inputState={inputState} setInputState={setInputState} center={center} setCenter={setCenter} />
         </div >

app/components/legend.tsx

@@ -1,5 +1,5 @@
 import { DiscreteColorLegend } from "react-vis";
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 import { formState, myColors } from "../shared/utils";
 
 export default function FormLegend({ width, state, setState }: { width: number, state: formState, setState: React.Dispatch<React.SetStateAction<formState>> }) {

app/components/plotControls.tsx

@@ -1,4 +1,4 @@
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 import FormLegend from './legend'
 import { formState } from '../shared/utils'
 

app/components/weatherPlot.tsx

@@ -2,7 +2,7 @@ import { AreaSeries, Crosshair, DecorativeAxis, Highlight, HighlightArea, Horizo
 import { formState, myColors } from "../shared/utils";
 import { leastSquaresLinearRegression } from "../shared/mathHelpers";
 import { useState } from "react";
-import styles from './form.module.css'
+import styles from '../styles/form.module.css'
 
 export function WeatherPlot({ state, setState, width }: { state: formState, setState: React.Dispatch<React.SetStateAction<formState>>, width: any }) {
     const [lastDrawLocation, setLastDrawLocation] = useState<HighlightArea | null>(null)

app/layout.tsx

@@ -1,6 +1,6 @@
-import './globals.css'
+import './styles/globals.css'
 import { Barlow, Montserrat, Roboto } from 'next/font/google'
-import styles from './layout.module.css';
+import styles from './styles/layout.module.css';
 
 const roboto = Roboto({
   weight: ['400', '700'],

app/shared/openMeteoInterface.tsx

@@ -1,5 +1,5 @@
 import { formState, getWeekNumber, inputState, median, months, myColors, visualizationModes } from "./utils";
-import styles from '../components/form.module.css'
+import styles from '../styles/form.module.css'
 /**
  * 
  * @returns Historical data for the current state of the form 

app/components/form.module.css → app/styles/form.module.css

@@ -19,6 +19,7 @@
     padding: 1rem;
     background-color: rgba(240, 248, 255, 0.656);
     border-radius: 25px;
+    overflow-x:visible;
 }
 
 .form h1 {
@@ -138,7 +139,7 @@
 }
 
 .settingForm {
-    display: flex;
+    display:inline-flex;
     flex-direction: row;
     justify-content: left;
     gap: 1rem;
@@ -180,4 +181,12 @@
 
 .highlightText {
     display:inline-block;
+}
+
+@media only screen and (max-width: 825px) {
+
+    .settingForm {
+        display: grid;
+        grid-template: "a a a" 40px            "b c c" 40px            "b c c" 40px / 1fr 1fr 1fr;
+    }
 }