From 7fb151fd89eb0b52ff7fea5fc6bbef4e1d14c643 Mon Sep 17 00:00:00 2001
From: Christina Yang <ychristina011@gmail.com>
Date: Wed, 23 Oct 2024 15:01:33 -0700
Subject: [PATCH] move react-split-pane classes out of App.css

---
 src/App.css                     | 51 ---------------------------------
 src/components/AppComponent.tsx | 43 ++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 55 deletions(-)

diff --git a/src/App.css b/src/App.css
index f5b6815981..8305137606 100644
--- a/src/App.css
+++ b/src/App.css
@@ -209,57 +209,6 @@
 
 /* Prose View */
 
-.SplitPane,
-.SplitPane .Resizer,
-.SplitPane .Pane {
-  user-select: none;
-}
-
-.Resizer {
-  background: #fff;
-  opacity: 0.2;
-  z-index: var(--z-index-resizer);
-  box-sizing: border-box;
-  background-clip: padding-box;
-}
-
-.Resizer:hover {
-  transition: all 0.2s ease-out;
-}
-
-.Resizer.horizontal {
-  height: 11px;
-  margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
-  cursor: row-resize;
-  width: 100%;
-}
-
-.Resizer.horizontal:hover {
-  border-top: 5px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
-  width: 11px;
-  margin: 0 -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
-  cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-  border-left: 5px solid rgba(255, 255, 255, 0.5);
-  border-right: 5px solid rgba(255, 255, 255, 0.5);
-}
-.Resizer.disabled {
-  cursor: not-allowed;
-}
-.Resizer.disabled:hover {
-  border-color: transparent;
-}
-
 .MuiDrawer-paperAnchorLeft {
   top: var(--safe-area-top) !important;
 }
diff --git a/src/components/AppComponent.tsx b/src/components/AppComponent.tsx
index d74686d824..1d2cfb44da 100644
--- a/src/components/AppComponent.tsx
+++ b/src/components/AppComponent.tsx
@@ -219,11 +219,46 @@ const AppComponent: FC = () => {
               </div>
             ) : (
               <SplitPane
-                className={css({
-                  position: 'relative',
-                  '& .Pane': {
-                    transition: isSplitting ? 'width 0.2s ease' : undefined,
+                paneClassName={css({ transition: isSplitting ? 'width 0.2s ease' : undefined, userSelect: 'none' })}
+                resizerClassName={css({
+                  background: '#fff',
+                  opacity: 0.2,
+                  zIndex: 'resizer',
+                  boxSizing: 'border-box',
+                  backgroundClip: 'padding-box',
+                  userSelect: 'none',
+                  '&:hover': {
+                    transition: 'all 0.2s ease-out',
+                  },
+                  '&.horizontal': {
+                    height: '11px',
+                    margin: '-5px 0',
+                    borderTop: '5px solid rgba(255, 255, 255, 0)',
+                    borderBottom: '5px solid rgba(255, 255, 255, 0)',
+                    cursor: 'row-resize',
+                    width: '100%',
+                  },
+                  '&.horizontal:hover': {
+                    borderTop: '5px solid rgba(0, 0, 0, 0.5)',
+                    borderBottom: '5px solid rgba(0, 0, 0, 0.5)',
+                  },
+                  '&.vertical': {
+                    width: '11px',
+                    margin: '0 -5px',
+                    borderLeft: '5px solid rgba(255, 255, 255, 0)',
+                    borderRight: '5px solid rgba(255, 255, 255, 0)',
+                    cursor: 'col-resize',
                   },
+                  '&.vertical:hover': {
+                    borderLeft: '5px solid rgba(255, 255, 255, 0.5)',
+                    borderRight: '5px solid rgba(255, 255, 255, 0.5)',
+                  },
+                  '&.disabled': { cursor: 'not-allowed' },
+                  '&.disabled:hover': { borderColor: 'transparent' },
+                })}
+                className={css({
+                  position: 'relative', // not applied due to `position: absolute` in style prop of react-split-pane
+                  userSelect: 'none',
                 })}
                 defaultSize={!showSplitView ? '100%' : splitPosition || '50%'}
                 onChange={onSplitResize}