The site displays correctly on mobile (#863)
commitc8e855d919cff6f10de8f6ac1cd4e7a85a9731b1
authorWill Galebach <willbach@gmail.com>
dateThu 23 Dec 2021, 16:43 (5 years ago)
parent6490800
src/components/L2/Dropdowns/AccountsDropdown.scss+1
@@ -83,6 +83,7 @@
8383 line-height: 24px;
8484 position: relative;
8585 width: 368px;
86+ max-width: 100%;
8687
8788 .close {
8889 position: absolute;
src/components/L2/Headers/L2BackHeader.scss+4
@@ -8,6 +8,10 @@
88 font-size: 14px;
99 margin: 48px 0px 8px;
1010
11+ @media only screen and (max-width: 500px) {
12+ margin-top: 0px;
13+ }
14+
1115 .login-margins {
1216 margin: 0px 0px 16px;
1317 }
src/components/L2/Headers/L2PointHeader.scss+4
@@ -8,6 +8,10 @@
88 font-size: 14px;
99 margin: 40px 0px 16px;
1010
11+ @media only screen and (max-width: 500px) {
12+ margin-top: 0px;
13+ }
14+
1115 .home {
1216 margin-right: 8px;
1317 }
src/components/L2/Modal.scss+1
@@ -30,5 +30,6 @@
3030 padding: 24px;
3131 font-size: 14px;
3232 line-height: 24px;
33+ max-width: calc(100vw - 80px);
3334 }
3435}
src/components/L2/PointList.tsx+2−2
@@ -29,11 +29,11 @@ const PointList: React.FC<PointListProps> = function({
2929 const { push, names }: any = useHistory();
3030
3131 return (
32− <Grid gap={4} className={className}>
32+ <Grid asFlex gap={4} className={`${className} flex-row flex-wrap`}>
3333 {points.map((point, i) => (
3434 <Grid.Item
3535 key={point.value}
36− className={`full fourth-${(i % 4) + 1}-md fourth-${(i % 4) + 1}-lg`}>
36+ className={`fourth-${(i % 4) + 1}-md fourth-${(i % 4) + 1}-lg`}>
3737 <Flex col className="rel">
3838 <Passport.Mini
3939 locked={locked}
src/components/L2/Window/Window.scss+2−1
@@ -4,4 +4,5 @@
44 border-radius: $medium-border-radius;
55 border: 1px solid $light-gray;
66 width: 480px;
7−}
7+ max-width: calc(100vw - 32px);
8+}
src/components/Passport.js+1−1
@@ -94,7 +94,7 @@ function Passport({
9494 borderRadius: '20px',
9595 marginBottom: '16px',
9696 width: `${16 + 16 + cols * tile}px`,
97− minWidth: `${16 + 16 + cols * tile}px`,
97+ maxWidth: '100%',
9898 display: 'flex',
9999 flexDirection: 'column',
100100 }}>
src/components/SigilMini.scss+1
@@ -7,6 +7,7 @@
77 justify-content: center;
88 align-items: center;
99 cursor: pointer;
10+ white-space: nowrap;
1011
1112 &:hover {
1213 transform: scale(1.02);
src/components/View.js+1−1
@@ -65,7 +65,7 @@ function View({
6565 col={isMobile}
6666 justify="between"
6767 className={cn(
68− 'minh-100 ph5',
68+ 'minh-100 ph4',
6969 {
7070 mw1: !full,
7171 'mw2 ph9-md ph10-lg': full,
src/indigo-react/components/Grid.js+10−2
@@ -2,14 +2,22 @@ import React from 'react';
22import cn from 'classnames';
33
44const Grid = React.forwardRef(function Grid(
5− { as: As = 'div', gap = 0, align, justify, className, ...rest },
5+ {
6+ as: As = 'div',
7+ gap = 0,
8+ asFlex = false,
9+ align,
10+ justify,
11+ className,
12+ ...rest
13+ },
614 ref
715) {
816 return (
917 <As
1018 ref={ref}
1119 className={cn(
12− 'grid12',
20+ asFlex ? 'flex' : 'grid12',
1321 gap && `gap${gap}`,
1422 {
1523 [`justify-${justify}`]: justify,
src/views/Activate/ActivateView.tsx+1−2
@@ -30,8 +30,7 @@ export default function ActivateView({
3030 padding={'10px'}
3131 width={'512px'}
3232 height={'512px'}
33− max-width={'512px'}
34− max-height={'512px'}
33+ maxWidth={'calc(100vw - 48px)'}
3534 className={cn(className)}
3635 mb={3}>
3736 <Box gridArea="header">{header}</Box>
src/views/Invite/Cohort.scss+1
@@ -228,6 +228,7 @@
228228 flex-direction: column;
229229 justify-content: space-between;
230230 font-weight: 500;
231+ max-width: 100%;
231232
232233 .download-buttons {
233234 justify-content: flex-end;
src/views/Login.scssnew file+3
@@ -0,0 +1,3 @@
1+.w-max-mobile {
2+ max-width: calc(100vw - 32px);
3+}
src/views/Login.tsx+12−2
@@ -12,6 +12,8 @@ import Footer from 'components/Footer';
1212
1313import Other from './Login/Other';
1414
15+import './Login.scss';
16+
1517export default function Login() {
1618 // globals
1719 const { push, names }: any = useHistory();
@@ -60,7 +62,10 @@ export default function Login() {
6062 return (
6163 <View inset>
6264 <Grid>
63− <Grid.Item full as={Text} className="flex justify-center mt9 mb7">
65+ <Grid.Item
66+ full
67+ as={Text}
68+ className="flex justify-center mt9 mb7 w-max-mobile">
6469 <Grid.Item as={Text}>Bridge / </Grid.Item>
6570 <Grid.Item className="fw-bold" as={Text}>
6671 Log In
@@ -71,7 +76,12 @@ export default function Login() {
7176 {flowDescription(flow)}
7277 </Grid.Item>
7378 )}
74− <Grid.Item full as={Other} goHome={goHome} className="login-selector" />
79+ <Grid.Item
80+ full
81+ as={Other}
82+ goHome={goHome}
83+ className="login-selector w-max-mobile"
84+ />
7585 </Grid>
7686
7787 <Footer>
src/views/Login/LoginSelector.scss+1
@@ -74,6 +74,7 @@
7474 padding: 24px;
7575 font-size: 14px;
7676 line-height: 24px;
77+ max-width: 100%;
7778 }
7879
7980 .master-ticket {
src/views/Point/MigrateL2.scss+1
@@ -22,6 +22,7 @@
2222 .info-row {
2323 margin-bottom: 24px;
2424 width: 370px;
25+ max-width: 100%;
2526
2627 .icon-background {
2728 width: 24px;
src/views/Point/Point.scss+1
@@ -6,6 +6,7 @@
66 line-height: 24px;
77 position: relative;
88 width: 368px;
9+ max-width: 100%;
910
1011 .title {
1112 font-weight: 700;
src/views/UrbitID/SetProxy.js+1
@@ -285,6 +285,7 @@ export default function SetProxy() {
285285 <Flex.Item
286286 flex
287287 as={Text}
288+ style={{ overflowWrap: 'anywhere' }}
288289 className={cn('mono mv3 gray4', {
289290 black: !completed && isProxySet,
290291 gray4: !completed && !isProxySet,
src/views/UrbitOS/UrbitOS.scss+1
@@ -11,4 +11,5 @@
1111 background-color: white;
1212 border-radius: $large-border-radius;
1313 position: relative;
14+ max-width: 100%;
1415}