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 ca8007f9b..d7cb8b93a 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 1f0c444aa..2de38db98 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 000000000..980413fe2
--- /dev/null
+++ b/upcoming-release-notes/3161.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis, MikesGlitch]
+---
+
+Allow modal content to be vertically scrollable.
--
GitLab