From 6a4791eed3ac2fd1e90a8adacc4d081244f7233c Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Tue, 9 Sep 2025 13:42:17 +0100
Subject: [PATCH] remove box outlines and put the range inputs in line with the
 apply button

---
 .../AdvancedSelectionPanel.tsx                | 36 +++++++++----------
 .../BulkSelectionPanel.module.css             | 16 ++-------
 2 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx b/frontend/src/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx
index 4e80345e0..0717459c0 100644
--- a/frontend/src/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx
+++ b/frontend/src/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx
@@ -97,7 +97,7 @@ const AdvancedSelectionPanel = ({
                 <Text size="sm" fw={600} c="var(--text-secondary)" mb="xs">Range</Text>
                 {rangeError && (<Text size="xs" c="var(--text-brand-accent)" mb="xs">{rangeError}</Text>)}
                 <div className={classes.inputGroup}>
-                  <Group gap="sm" align="flex-end" wrap="nowrap" mb="xs">
+                  <Group gap="sm" align="flex-end" wrap="nowrap">
                     <div style={{ flex: 1 }}>
                       <NumberInput
                         size="sm"
@@ -134,24 +134,24 @@ const AdvancedSelectionPanel = ({
                         error={Boolean(rangeError)}
                       />
                     </div>
+                    <Button 
+                      size="sm" 
+                      className={classes.applyButton}
+                      onClick={() => {
+                        if (
+                          rangeStart === '' || rangeEnd === '' ||
+                          typeof rangeStart !== 'number' || typeof rangeEnd !== 'number'
+                        ) return;
+                        const expr = rangeExpression(rangeStart, rangeEnd, maxPages);
+                        if (expr) applyExpression(expr);
+                        setRangeStart('');
+                        setRangeEnd('');
+                      }} 
+                      disabled={Boolean(rangeError) || rangeStart === '' || rangeEnd === ''}
+                    >
+                      Apply
+                    </Button>
                   </Group>
-                  <Button 
-                    size="sm" 
-                    className={classes.applyButton}
-                    onClick={() => {
-                      if (
-                        rangeStart === '' || rangeEnd === '' ||
-                        typeof rangeStart !== 'number' || typeof rangeEnd !== 'number'
-                      ) return;
-                      const expr = rangeExpression(rangeStart, rangeEnd, maxPages);
-                      if (expr) applyExpression(expr);
-                      setRangeStart('');
-                      setRangeEnd('');
-                    }} 
-                    disabled={Boolean(rangeError) || rangeStart === '' || rangeEnd === ''}
-                  >
-                    Apply
-                  </Button>
                 </div>
               </div>
               
diff --git a/frontend/src/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css b/frontend/src/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css
index 891b0ad71..a66bc1a6a 100644
--- a/frontend/src/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css
+++ b/frontend/src/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css
@@ -202,29 +202,17 @@
 
 .advancedCard {
   background-color: var(--bulk-card-bg);
-  border: 0.0625rem solid var(--bulk-card-border);
+  border: none;
   border-radius: 0.75rem;
-  padding: 0.75rem;
+  padding: 0.25rem;
   margin-bottom: 0.5rem;
   width: 100%;
   box-sizing: border-box;
-  transition: all 0.2s ease;
   color: var(--text-primary);
 }
 
-.advancedCard:hover {
-  border-color: var(--bulk-card-hover-border);
-  box-shadow: var(--shadow-sm);
-}
-
 :global([data-mantine-color-scheme='dark']) .advancedCard {
   background-color: var(--bulk-card-bg);
-  border-color: var(--bulk-card-border);
-}
-
-:global([data-mantine-color-scheme='dark']) .advancedCard:hover {
-  border-color: var(--bulk-card-hover-border);
-  box-shadow: var(--shadow-sm);
 }
 
 .inputGroup {