From 3a38c32b4c19f57a494784a02b71feb0d9ce4426 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Fri, 2 Aug 2024 19:16:32 +0100
Subject: [PATCH] :bug: (modals) allow content to be vertically scrollable
 (#3161)

* :bug: (modals) allow content to be vertically scrollable

Closes #3079

* Feedback: overfloww auto

* fix modal scrollbar style

* dont need to spread

* lint :disappointed:

* Update 3161.md

* adding width 100% to inputwithcontent

---------

Co-authored-by: Michael Clark <5285928+MikesGlitch@users.noreply.github.com>
---
 .../src/components/common/InputWithContent.tsx              | 1 +
 packages/desktop-client/src/components/common/Modal2.tsx    | 6 ++++--
 upcoming-release-notes/3161.md                              | 6 ++++++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 upcoming-release-notes/3161.md

diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
index ca8007f9b53..d7cb8b93a96 100644
--- 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
index 1f0c444aace..2de38db9801 100644
--- 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
new file mode 100644
index 00000000000..980413fe218
--- /dev/null
+++ b/upcoming-release-notes/3161.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis, MikesGlitch]
+---
+
+Allow modal content to be vertically scrollable.