From e342a4c94c57b03374296dd9d536b6135974baac Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Wed, 3 Jul 2024 20:28:26 +0100
Subject: [PATCH] wip

---
 .../RecorderSessionFinishModal.tsx            | 10 ++++---
 .../ActionRecorder/RecorderSessionHeading.tsx | 26 ++++++++++---------
 webui/src/Buttons/EditButton.tsx              |  4 ---
 webui/src/scss/_layout.scss                   |  1 +
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/webui/src/Buttons/ActionRecorder/RecorderSessionFinishModal.tsx b/webui/src/Buttons/ActionRecorder/RecorderSessionFinishModal.tsx
index 9e047c496..8e832bf12 100644
--- a/webui/src/Buttons/ActionRecorder/RecorderSessionFinishModal.tsx
+++ b/webui/src/Buttons/ActionRecorder/RecorderSessionFinishModal.tsx
@@ -43,6 +43,8 @@ export function RecorderSessionFinishModal({ doClose, sessionId }: RecorderSessi
 
 	const [modalRef, setModalRef] = useState<HTMLDivElement | null>(null)
 
+	const [activeTab, setActiveTab] = useState<'buttons' | 'triggers'>('buttons')
+
 	return (
 		<CModal ref={setModalRef} visible={true} onClose={doClose} size="lg" className="modal-full-height" scrollable>
 			<MenuPortalContext.Provider value={modalRef}>
@@ -54,21 +56,21 @@ export function RecorderSessionFinishModal({ doClose, sessionId }: RecorderSessi
 						{/* <CTabs activeTab="buttons"> */}
 						<CNav variant="tabs">
 							<CNavItem>
-								<CNavLink data-tab="buttons">
+								<CNavLink active={activeTab === 'buttons'} onClick={() => setActiveTab('buttons')}>
 									<FontAwesomeIcon icon={faCalendarAlt} /> Buttons
 								</CNavLink>
 							</CNavItem>
 							<CNavItem>
-								<CNavLink data-tab="triggers">
+								<CNavLink active={activeTab === 'triggers'} onClick={() => setActiveTab('triggers')}>
 									<FontAwesomeIcon icon={faClock} /> Triggers
 								</CNavLink>
 							</CNavItem>
 						</CNav>
 						<CTabContent className="default-scroll">
-							<CTabPane data-tab="buttons" className="action-recorder-finish-button-grid">
+							<CTabPane className="action-recorder-finish-button-grid" visible={activeTab === 'buttons'}>
 								<ButtonPicker selectButton={doSave} />
 							</CTabPane>
-							<CTabPane data-tab="triggers">
+							<CTabPane visible={activeTab === 'triggers'}>
 								<CRow>
 									<CCol sm={12}>
 										<TriggerPicker selectControl={doSave} />
diff --git a/webui/src/Buttons/ActionRecorder/RecorderSessionHeading.tsx b/webui/src/Buttons/ActionRecorder/RecorderSessionHeading.tsx
index d69a62304..51ed5bf01 100644
--- a/webui/src/Buttons/ActionRecorder/RecorderSessionHeading.tsx
+++ b/webui/src/Buttons/ActionRecorder/RecorderSessionHeading.tsx
@@ -109,24 +109,26 @@ export function RecorderSessionHeading({ confirmRef, sessionId, sessionInfo, doF
 						<div>
 							<CFormLabel>Recording</CFormLabel>
 							<p>
-								<CFormSwitch color="success" size="lg" checked={!!sessionInfo.isRunning} onChange={changeRecording} />
+								<CFormSwitch color="success" size="xl" checked={!!sessionInfo.isRunning} onChange={changeRecording} />
 							</p>
 						</div>
 					</div>
 				</CRow>
 
 				<CRow form className="flex-form-row" style={{ clear: 'both' }}>
-					<CButtonGroup className={'margin-bottom'}>
-						<CButton onClick={doClearActions} color="danger" disabled={!sessionInfo.actions?.length}>
-							Clear Actions
-						</CButton>
-						<CButton onClick={doAbort} color="danger">
-							Discard
-						</CButton>
-						<CButton onClick={doFinish2} color="danger" disabled={!sessionInfo.actions?.length}>
-							Finish
-						</CButton>
-					</CButtonGroup>
+					<div>
+						<CButtonGroup className={'margin-bottom'}>
+							<CButton onClick={doClearActions} color="danger" disabled={!sessionInfo.actions?.length}>
+								Clear Actions
+							</CButton>
+							<CButton onClick={doAbort} color="danger">
+								Discard
+							</CButton>
+							<CButton onClick={doFinish2} color="danger" disabled={!sessionInfo.actions?.length}>
+								Finish
+							</CButton>
+						</CButtonGroup>
+					</div>
 				</CRow>
 			</CForm>
 		</>
diff --git a/webui/src/Buttons/EditButton.tsx b/webui/src/Buttons/EditButton.tsx
index 8aa676982..132b61ad7 100644
--- a/webui/src/Buttons/EditButton.tsx
+++ b/webui/src/Buttons/EditButton.tsx
@@ -497,10 +497,7 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc
 			<div key="button">
 				<GenericConfirmModal ref={confirmRef} />
 
-				<br />
-
 				<div ref={setTabsRef} className={'row-heading'}>
-					{/* <CTabs activeTab={selectedStep} onActiveTabChange={clickSelectedStep}> */}
 					<CNav variant="tabs">
 						{keys.map((stepId, i) => (
 							<ActionSetTab
@@ -532,7 +529,6 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc
 							</CNavItem>
 						)}
 					</CNav>
-					{/* </CTabs> */}
 				</div>
 
 				<div
diff --git a/webui/src/scss/_layout.scss b/webui/src/scss/_layout.scss
index 37581d9e1..015e23527 100644
--- a/webui/src/scss/_layout.scss
+++ b/webui/src/scss/_layout.scss
@@ -115,6 +115,7 @@ body {
 	.row-heading {
 		position: sticky;
 		padding-top: 0;
+		padding-top: 1rem;
 		margin-top: -1rem;
 		top: 0;
 		left: 0;