From 348b054321979621103fdc0c6214e875c41ba343 Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Tue, 8 Oct 2024 00:15:11 +0200
Subject: [PATCH 1/4] Add rudimentary responsive layout, rework ui in macros

---
 www/src/App.jsx                       |   2 +-
 www/src/App.scss                      |   3 -
 www/src/Components/Navigation.scss    |   4 +
 www/src/Pages/InputMacroAddonPage.tsx | 246 +++++++++++---------------
 www/src/Pages/PinMapping.tsx          |   6 +-
 www/src/Pages/SettingsPage.jsx        |  22 +--
 www/src/index.scss                    |   1 -
 7 files changed, 124 insertions(+), 160 deletions(-)

diff --git a/www/src/App.jsx b/www/src/App.jsx
index 378408ff4..5fef610f2 100644
--- a/www/src/App.jsx
+++ b/www/src/App.jsx
@@ -25,7 +25,7 @@ const App = () => {
 		<AppContextProvider>
 			<Router>
 				<Navigation />
-				<div className="container-fluid body-content">
+				<div className="body-content container-lg">
 					<Routes>
 						<Route path="/" element={<HomePage />} />
 						<Route path="/settings" element={<SettingsPage />} />
diff --git a/www/src/App.scss b/www/src/App.scss
index 6222c58ce..e0d9c06a8 100644
--- a/www/src/App.scss
+++ b/www/src/App.scss
@@ -1,7 +1,4 @@
 .body-content {
-	min-width: 400px;
-	display: flex;
 	margin-top: 58px;
-	flex-direction: column;
 	padding: 10px 20px;
 }
diff --git a/www/src/Components/Navigation.scss b/www/src/Components/Navigation.scss
index 095dfa980..82ac53ea5 100644
--- a/www/src/Components/Navigation.scss
+++ b/www/src/Components/Navigation.scss
@@ -1,5 +1,9 @@
 $nav-outer-margin: 0.75rem;
 
+.nav {
+	padding-bottom: 1.5rem;
+}
+
 nav.navbar {
 	padding: 0;
 
diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index 3c99391b5..43bfb83b9 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -5,6 +5,7 @@ import {
 	Button,
 	Col,
 	Form,
+	InputGroup,
 	Nav,
 	OverlayTrigger,
 	Row,
@@ -111,23 +112,23 @@ const ButtonMasksComponent = (props) => {
 		buttonMasks,
 	} = props;
 	return (
-		<div key={key} className={className}>
-			<Form.Select
-				size="sm"
-				name={`${key}.buttonMask`}
-				className="form-control col-sm-auto"
-				value={value}
-				error={error}
-				isInvalid={isInvalid}
-				onChange={onChange}
-			>
-				{buttonMasks.map((o, i2) => (
-					<option key={`${key}.mask[${i2}]`} value={o.value}>
-						{(buttonLabelType && BUTTONS[buttonLabelType][o.label]) || o.label}
-					</option>
-				))}
-			</Form.Select>
-		</div>
+		// <div key={key} className={className}>
+		<Form.Select
+			size="sm"
+			name={`${key}.buttonMask`}
+			// className="form-control"
+			value={value}
+			error={error}
+			isInvalid={isInvalid}
+			onChange={onChange}
+		>
+			{buttonMasks.map((o, i2) => (
+				<option key={`${key}.mask[${i2}]`} value={o.value}>
+					{(buttonLabelType && BUTTONS[buttonLabelType][o.label]) || o.label}
+				</option>
+			))}
+		</Form.Select>
+		// </div>
 	);
 };
 
@@ -146,77 +147,46 @@ const MacroInputComponent = (props) => {
 	} = props;
 
 	return (
-		<Row key={key} className="py-2 flex-nowrap">
-			<Col
-				style={{
-					minWidth: '150px',
-					maxWidth: '150px',
-				}}
-			>
-				<Row className="d-flex justify-content-center">
-					<Col sm={6} className="px-0">
-						<Form.Control
-							className="text-center"
-							size="sm"
-							type="number"
-							placeholder={t('InputMacroAddon:input-macro-duration-label')}
-							name={`${key}.duration`}
-							value={duration / (showFrames ? ONE_FRAME_US : 1000)}
-							step="any"
-							error={errors?.duration}
-							isInvalid={errors?.duration}
-							onChange={(e) => {
-								setFieldValue(
-									`${key}.duration`,
-									e.target.value * (showFrames ? ONE_FRAME_US : 1000),
-								);
-							}}
-							min={0}
-						/>
-					</Col>
-					<Col sm={5} className="px-1 text-nowrap">
+		<Row className="align-content-start align-items-center row-gap-2 pb-2">
+			<Col xs="auto">
+				<InputGroup size="sm">
+					<Form.Control
+						className="text-center"
+						type="number"
+						placeholder={t('InputMacroAddon:input-macro-duration-label')}
+						name={`${key}.duration`}
+						value={duration / (showFrames ? ONE_FRAME_US : 1000)}
+						step="any"
+						error={errors?.duration}
+						isInvalid={errors?.duration}
+						onChange={(e) => {
+							setFieldValue(
+								`${key}.duration`,
+								e.target.value * (showFrames ? ONE_FRAME_US : 1000),
+							);
+						}}
+						min={0}
+					/>
+					<InputGroup.Text id="basic-addon2">
 						{t(
 							showFrames
 								? 'InputMacroAddon:input-macro-time-label-frames'
 								: 'InputMacroAddon:input-macro-time-label-ms',
 						)}
-					</Col>
-				</Row>
+					</InputGroup.Text>
+				</InputGroup>
 			</Col>
-			<Col sm={'auto'}>
-				<Row className="d-flex justify-content-center">
-					{BUTTON_MASKS_OPTIONS.filter((mask) => buttonMask & mask.value).map(
-						(mask, i1) => (
-							<Col
-								key={`${key}.buttonMask[${i1}]`}
-								sm={'auto'}
-								className="px-1"
-							>
-								<ButtonMasksComponent
-									id={`${key}.buttonMask[${i1}]`}
-									value={buttonMask & mask.value}
-									onChange={(e) => {
-										setFieldValue(
-											`${key}.buttonMask`,
-											(buttonMask ^ mask.value) | e.target.value,
-										);
-									}}
-									error={errors?.buttonMask}
-									isInvalid={errors?.buttonMask}
-									translation={t}
-									buttonLabelType={buttonLabelType}
-									buttonMasks={BUTTON_MASKS_OPTIONS}
-								/>
-							</Col>
-						),
-					)}
-					<Col sm={'auto'} className="px-1">
+			{BUTTON_MASKS_OPTIONS.filter((mask) => buttonMask & mask.value).map(
+				(mask, i1) => (
+					<Col xs="auto" key={`${key}.buttonMask[${i1}]`}>
 						<ButtonMasksComponent
-							id={`${key}.buttonMaskPlaceholder`}
-							className="col-sm-auto"
-							value={0}
+							id={`${key}.buttonMask[${i1}]`}
+							value={buttonMask & mask.value}
 							onChange={(e) => {
-								setFieldValue(`${key}.buttonMask`, buttonMask | e.target.value);
+								setFieldValue(
+									`${key}.buttonMask`,
+									(buttonMask ^ mask.value) | e.target.value,
+								);
 							}}
 							error={errors?.buttonMask}
 							isInvalid={errors?.buttonMask}
@@ -225,68 +195,68 @@ const MacroInputComponent = (props) => {
 							buttonMasks={BUTTON_MASKS_OPTIONS}
 						/>
 					</Col>
-				</Row>
-			</Col>
-			<Col
-				style={{
-					minWidth: '125px',
-					maxWidth: '125px',
-				}}
-				className="d-flex justify-content-center text-nowrap"
-			>
-				{' '}
-				{t('InputMacroAddon:input-macro-release-and-wait-label')}{' '}
+				),
+			)}
+			<Col xs="auto">
+				<ButtonMasksComponent
+					id={`${key}.buttonMaskPlaceholder`}
+					className="col-sm-auto"
+					value={0}
+					onChange={(e) => {
+						setFieldValue(`${key}.buttonMask`, buttonMask | e.target.value);
+					}}
+					error={errors?.buttonMask}
+					isInvalid={errors?.buttonMask}
+					translation={t}
+					buttonLabelType={buttonLabelType}
+					buttonMasks={BUTTON_MASKS_OPTIONS}
+				/>
 			</Col>
-			<Col
-				style={{
-					minWidth: '150px',
-					maxWidth: '150px',
-				}}
-			>
-				<Row className="d-flex justify-content-center">
-					<Col sm={6} className="px-0">
-						<Form.Control
-							className="text-center"
-							size="sm"
-							type="number"
-							placeholder={t('InputMacroAddon:input-macro-wait-duration-label')}
-							name={`${key}.waitDuration`}
-							value={waitDuration / (showFrames ? ONE_FRAME_US : 1000)}
-							step="any"
-							error={errors?.waitDuration}
-							isInvalid={errors?.waitDuration}
-							onChange={(e) => {
-								setFieldValue(
-									`${key}.waitDuration`,
-									e.target.value * (showFrames ? ONE_FRAME_US : 1000),
-								);
-							}}
-							min={0}
-						/>
-					</Col>
-					<Col sm={5} className="px-1 text-nowrap">
+			<Col xs="auto">
+				<InputGroup size="sm">
+					<InputGroup.Text>
+						{t('InputMacroAddon:input-macro-release-and-wait-label')}
+					</InputGroup.Text>
+					<Form.Control
+						className="text-center d-flex"
+						type="number"
+						placeholder={t('InputMacroAddon:input-macro-wait-duration-label')}
+						name={`${key}.waitDuration`}
+						value={waitDuration / (showFrames ? ONE_FRAME_US : 1000)}
+						step="any"
+						error={errors?.waitDuration}
+						isInvalid={errors?.waitDuration}
+						onChange={(e) => {
+							setFieldValue(
+								`${key}.waitDuration`,
+								e.target.value * (showFrames ? ONE_FRAME_US : 1000),
+							);
+						}}
+						min={0}
+					/>
+					<InputGroup.Text>
 						{t(
 							showFrames
 								? 'InputMacroAddon:input-macro-time-label-frames'
 								: 'InputMacroAddon:input-macro-time-label-ms',
 						)}
-					</Col>
-					<Col sm={1} className="px-0 text-nowrap">
-						<OverlayTrigger
-							placement="right"
-							overlay={tooltip}
-							delay={{ show: 500, hide: 100 }}
-						>
-							<Button
-								variant="transparent"
-								size="sm"
-								onDoubleClick={deleteMacroInput}
-							>
-								💥
-							</Button>
-						</OverlayTrigger>
-					</Col>
-				</Row>
+					</InputGroup.Text>
+				</InputGroup>
+			</Col>
+			<Col xs="auto">
+				<OverlayTrigger
+					placement="right"
+					overlay={tooltip}
+					delay={{ show: 500, hide: 100 }}
+				>
+					<Button
+						variant="transparent"
+						size="sm"
+						onDoubleClick={deleteMacroInput}
+					>
+						💥
+					</Button>
+				</OverlayTrigger>
 			</Col>
 		</Row>
 	);
@@ -553,7 +523,7 @@ export default function MacrosPage() {
 					<Form noValidate onSubmit={handleSubmit}>
 						<Tab.Container defaultActiveKey="settings">
 							<Row>
-								<Col sm={2}>
+								<Col md={3}>
 									<Nav variant="pills" className="flex-column text-nowrap">
 										<Nav.Item key="pills-header">
 											<Nav.Link eventKey="settings">
@@ -575,7 +545,7 @@ export default function MacrosPage() {
 										))}
 									</Nav>
 								</Col>
-								<Col sm={10}>
+								<Col md={9}>
 									<Tab.Content>
 										<Tab.Pane eventKey="settings">
 											<Section
diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
index d8f4ac8a7..15beddddc 100644
--- a/www/src/Pages/PinMapping.tsx
+++ b/www/src/Pages/PinMapping.tsx
@@ -393,7 +393,7 @@ export default function PinMapping() {
 	return (
 		<Tab.Container defaultActiveKey="profile-0">
 			<Row>
-				<Col sm={2}>
+				<Col md={3}>
 					{loadingProfiles && (
 						<div className="d-flex justify-content-center">
 							<span className="spinner-border" />
@@ -427,7 +427,7 @@ export default function PinMapping() {
 					</Nav>
 					<hr />
 					<p className="text-center">{t('PinMapping:sub-header-text')}</p>
-					<div className="d-flex justify-content-center">
+					<div className="d-flex justify-content-center pb-3">
 						<CaptureButton
 							buttonLabel={t('PinMapping:pin-viewer')}
 							labels={['']}
@@ -440,7 +440,7 @@ export default function PinMapping() {
 						</div>
 					)}
 				</Col>
-				<Col sm={10}>
+				<Col md={9}>
 					<Tab.Content>
 						{profiles.map((_, index) => (
 							<Tab.Pane key={`profile-${index}`} eventKey={`profile-${index}`}>
diff --git a/www/src/Pages/SettingsPage.jsx b/www/src/Pages/SettingsPage.jsx
index fac53e33f..ab737e9da 100644
--- a/www/src/Pages/SettingsPage.jsx
+++ b/www/src/Pages/SettingsPage.jsx
@@ -754,7 +754,7 @@ export default function SettingsPage() {
 											<Trans
 												ns="SettingsPage"
 												i18nKey="ps4-id-mode-explanation-text"
-												components={{ ul: <ul />, li: <li/> }}
+												components={{ ul: <ul />, li: <li /> }}
 											/>
 										}
 									/>
@@ -766,11 +766,8 @@ export default function SettingsPage() {
 									onChange={handleChange}
 								>
 									{PS4_ID_MODES.map((o) => (
-										<option
-											key={`ps4-id-option-${o.value}`}
-											value={o.value}
-										>
-											{`${t('SettingsPage:'+o.labelKey)}`}
+										<option key={`ps4-id-option-${o.value}`} value={o.value}>
+											{`${t('SettingsPage:' + o.labelKey)}`}
 										</option>
 									))}
 								</Form.Select>
@@ -915,7 +912,7 @@ export default function SettingsPage() {
 											<Trans
 												ns="SettingsPage"
 												i18nKey="ps4-id-mode-explanation-text"
-												components={{ ul: <ul />, li: <li/> }}
+												components={{ ul: <ul />, li: <li /> }}
 											/>
 										}
 									/>
@@ -927,11 +924,8 @@ export default function SettingsPage() {
 									onChange={handleChange}
 								>
 									{PS4_ID_MODES.map((o) => (
-										<option
-											key={`ps4-id-option-${o.value}`}
-											value={o.value}
-										>
-											{`${t('SettingsPage:'+o.labelKey)}`}
+										<option key={`ps4-id-option-${o.value}`} value={o.value}>
+											{`${t('SettingsPage:' + o.labelKey)}`}
 										</option>
 									))}
 								</Form.Select>
@@ -1132,7 +1126,7 @@ export default function SettingsPage() {
 						<Form noValidate onSubmit={handleSubmit}>
 							<Tab.Container defaultActiveKey="inputmode">
 								<Row>
-									<Col sm={2}>
+									<Col md={3}>
 										<Nav variant="pills" className="flex-column">
 											<Nav.Item>
 												<Nav.Link eventKey="inputmode">
@@ -1156,7 +1150,7 @@ export default function SettingsPage() {
 											</Nav.Item>
 										</Nav>
 									</Col>
-									<Col sm={10}>
+									<Col md={9}>
 										<Tab.Content>
 											<Tab.Pane eventKey="inputmode">
 												<Section title={t('SettingsPage:settings-header-text')}>
diff --git a/www/src/index.scss b/www/src/index.scss
index f2c86d8d9..7be333d62 100644
--- a/www/src/index.scss
+++ b/www/src/index.scss
@@ -20,7 +20,6 @@ body {
 		sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	min-width: 880px;
 }
 
 h1 {

From 0ff5938ee81e26edcbc6045aee1ecb1c125c2b48 Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Tue, 8 Oct 2024 00:32:35 +0200
Subject: [PATCH 2/4] Collapse pin mapping to one column

---
 www/src/Pages/PinMapping.scss | 7 +++++++
 www/src/Pages/PinMapping.tsx  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/www/src/Pages/PinMapping.scss b/www/src/Pages/PinMapping.scss
index 7de724164..b1697e993 100644
--- a/www/src/Pages/PinMapping.scss
+++ b/www/src/Pages/PinMapping.scss
@@ -4,3 +4,10 @@
 	grid-template-columns: 1fr 1fr;
 	grid-template-rows: repeat(15, auto);
 }
+
+@media only screen and (max-width: 680px) {
+	.pin-grid {
+		display: flex;
+		flex-direction: column;
+	}
+}
diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
index 15beddddc..e8a0867c3 100644
--- a/www/src/Pages/PinMapping.tsx
+++ b/www/src/Pages/PinMapping.tsx
@@ -231,7 +231,7 @@ const PinSelectList = memo(function PinSelectList({
 		[buttonNames],
 	);
 	return Object.entries(pins).map(([pin, pinData], index) => (
-		<div key={`select-${index}`} className="d-flex col align-items-center">
+		<div key={`select-${index}`} className="d-flex align-items-center">
 			<div className="d-flex flex-shrink-0" style={{ width: '4rem' }}>
 				<label>{pin.toUpperCase()}</label>
 			</div>

From b27b460c57eeec57bbcf262badef05776d5f07b5 Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Tue, 8 Oct 2024 12:59:16 +0200
Subject: [PATCH 3/4] Remove left over id

---
 www/src/Pages/InputMacroAddonPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index 43bfb83b9..36606cab8 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -167,7 +167,7 @@ const MacroInputComponent = (props) => {
 						}}
 						min={0}
 					/>
-					<InputGroup.Text id="basic-addon2">
+					<InputGroup.Text>
 						{t(
 							showFrames
 								? 'InputMacroAddon:input-macro-time-label-frames'

From 263c9f64a2c5d5b8372c5fefdd8f38daaff57705 Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Tue, 8 Oct 2024 13:06:04 +0200
Subject: [PATCH 4/4] Make some inputs smaller on macro page

---
 www/src/Pages/InputMacroAddonPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index 36606cab8..e7951610c 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -148,7 +148,7 @@ const MacroInputComponent = (props) => {
 
 	return (
 		<Row className="align-content-start align-items-center row-gap-2 pb-2">
-			<Col xs="auto">
+			<Col xs="auto" style={{ width: 180 }}>
 				<InputGroup size="sm">
 					<Form.Control
 						className="text-center"
@@ -212,7 +212,7 @@ const MacroInputComponent = (props) => {
 					buttonMasks={BUTTON_MASKS_OPTIONS}
 				/>
 			</Col>
-			<Col xs="auto">
+			<Col xs="auto" style={{ width: 290 }}>
 				<InputGroup size="sm">
 					<InputGroup.Text>
 						{t('InputMacroAddon:input-macro-release-and-wait-label')}