🐛 (modals) allow content to be vertically scrollable (#3161)

* 🐛 (modals) allow content to be vertically scrollable Closes #3079 * Feedback: overfloww auto * fix modal scrollbar style * dont need to spread * lint 😞 * Update 3161.md * adding width 100% to inputwithcontent --------- Co-authored-by: Michael Clark <[email protected]>
actualbudget · Aug 2, 2024 · 3a38c32 · 3a38c32
1 parent c3c6acd
commit 3a38c32
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -44,6 +44,7 @@ export function InputWithContent({
         {...props}
         focused={focused}
         style={{
+          width: '100%',
           ...inputStyle,
           flex: 1,
           '&, &:focus, &:hover': {

diff --git a/packages/desktop-client/src/components/common/Modal2.tsx b/packages/desktop-client/src/components/common/Modal2.tsx
@@ -15,6 +15,7 @@ import {
 import { useHotkeysContext } from 'react-hotkeys-hook';
 
 import { AutoTextSize } from 'auto-text-size';
+import { css } from 'glamor';
 
 import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
@@ -89,6 +90,7 @@ export const Modal = ({
         {modalProps => (
           <Dialog
             aria-label="Modal dialog"
+            className={`${css(styles.lightScrollbar)}`}
             style={{
               outline: 'none', // remove focus outline
             }}
@@ -113,12 +115,12 @@ export const Modal = ({
                 [`@media (min-width: ${tokens.breakpoint_small})`]: {
                   minWidth: tokens.breakpoint_small,
                 },
+                overflowY: 'auto',
                 ...styles.shadowLarge,
-                ...styles.lightScrollbar,
                 ...containerProps?.style,
               }}
             >
-              <View style={{ paddingTop: 0, flex: 1 }}>
+              <View style={{ paddingTop: 0, flex: 1, flexShrink: 0 }}>
                 {typeof children === 'function'
                   ? children(modalProps)
                   : children}

diff --git a/upcoming-release-notes/3161.md b/upcoming-release-notes/3161.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis, MikesGlitch]
+---
+
+Allow modal content to be vertically scrollable.