Skip to content

Commit 042e5e5

Browse files
authored
fix: Allow to reduce mobile app height (#649)
### Description Of Changes issue: It was not able to reduce the height of the mobile app with some wrapper component * fix: Set the height of MobileApp to 100% & do not use 'vh' [UIKIT-4188](https://sendbird.atlassian.net/browse/UIKIT-4188)
1 parent 06bfe35 commit 042e5e5

File tree

4 files changed

+9
-3
lines changed

4 files changed

+9
-3
lines changed

src/modules/App/MobileLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
101101
}, [currentChannel?.url]);
102102

103103
return (
104-
<div>
104+
<div className='sb_mobile'>
105105
{
106106
panel === PANELS.CHANNEL_LIST && (
107107
<div className='sb_mobile__panelwrap'>

src/modules/App/mobile.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
.sb_mobile {
2+
height: 100%;
3+
}
4+
15
.sb_mobile__panelwrap {
2-
height: 100vh;
6+
height: 100%;
37
}
48

59
// storybook padding, not sendbird related

src/modules/App/stories/index.stories.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,7 @@ export const user1 = () => fitPageSize(
268268
userId={array[0]}
269269
nickname={array[0]}
270270
profileUrl={addProfile}
271+
breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
271272
showSearchIcon
272273
allowProfileEdit
273274
config={{ logLevel: 'all' }}

src/modules/App/stories/utils.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22

3-
export const fitPageSize = (component) => (
3+
export const fitPageSize = (component, style = {}) => (
44
<div
55
style={{
66
height: '100vh',
77
width: '100vw',
8+
...style,
89
}}
910
>
1011
{component}

0 commit comments

Comments
 (0)