c8e855d · bridge · git.iko.soy

src/components/L2/Dropdowns/AccountsDropdown.scss+1

compare with master

unifiedsplit

@@ -83,6 +83,7 @@

83 line-height: 24px;

84 position: relative;

85 width: 368px;

86+ max-width: 100%;

86

87

87 .close {

88 .close {

88 position: absolute;

89 position: absolute;

src/components/L2/Headers/L2BackHeader.scss+4

@@ -8,6 +8,10 @@

8 font-size: 14px;

9 margin: 48px 0px 8px;

10

11+ @media only screen and (max-width: 500px) {

12+ margin-top: 0px;

13+ }

14+

11 .login-margins {

15 .login-margins {

12 margin: 0px 0px 16px;

16 margin: 0px 0px 16px;

13 }

17 }

src/components/L2/Headers/L2PointHeader.scss+4

@@ -8,6 +8,10 @@

8 font-size: 14px;

9 margin: 40px 0px 16px;

10

11+ @media only screen and (max-width: 500px) {

12+ margin-top: 0px;

13+ }

14+

11 .home {

15 .home {

12 margin-right: 8px;

16 margin-right: 8px;

13 }

17 }

src/components/L2/Modal.scss+1

@@ -30,5 +30,6 @@

30 padding: 24px;

31 font-size: 14px;

32 line-height: 24px;

33+ max-width: calc(100vw - 80px);

33 }

34 }

34}

35}

src/components/L2/PointList.tsx+2−2

@@ -29,11 +29,11 @@ const PointList: React.FC<PointListProps> = function({

29 const { push, names }: any = useHistory();

30

31 return (

32− <Grid gap={4} className={className}>

32+ <Grid asFlex gap={4} className={`${className} flex-row flex-wrap`}>

33 {points.map((point, i) => (

34 <Grid.Item

35 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`}>

37 <Flex col className="rel">

38 <Passport.Mini

39 locked={locked}

src/components/L2/Window/Window.scss+2−1

@@ -4,4 +4,5 @@

4 border-radius: $medium-border-radius;

5 border: 1px solid $light-gray;

6 width: 480px;

7+ max-width: calc(100vw - 32px);

7−}

8+}

src/components/Passport.js+1−1

@@ -94,7 +94,7 @@ function Passport({

94 borderRadius: '20px',

95 marginBottom: '16px',

96 width: `${16 + 16 + cols * tile}px`,

97− minWidth: `${16 + 16 + cols * tile}px`,

97+ maxWidth: '100%',

98 display: 'flex',

99 flexDirection: 'column',

100 }}>

src/components/SigilMini.scss+1

@@ -7,6 +7,7 @@

7 justify-content: center;

8 align-items: center;

9 cursor: pointer;

10+ white-space: nowrap;

10

11

11 &:hover {

12 &:hover {

12 transform: scale(1.02);

13 transform: scale(1.02);

src/components/View.js+1−1

@@ -65,7 +65,7 @@ function View({

65 col={isMobile}

66 justify="between"

67 className={cn(

68− 'minh-100 ph5',

68+ 'minh-100 ph4',

69 {

70 mw1: !full,

71 'mw2 ph9-md ph10-lg': full,

src/indigo-react/components/Grid.js+10−2

@@ -2,14 +2,22 @@ import React from 'react';

2import cn from 'classnames';

3

4const Grid = React.forwardRef(function Grid(

5+ {

6+ as: As = 'div',

7+ gap = 0,

8+ asFlex = false,

9+ align,

10+ justify,

5− { as: As = 'div', gap = 0, align, justify, className, ...rest },

11+ className,

12+ ...rest

13+ },

6 ref

14 ref

7) {

15) {

8 return (

16 return (

9 <As

17 <As

10 ref={ref}

18 ref={ref}

11 className={cn(

19 className={cn(

12− 'grid12',

20+ asFlex ? 'flex' : 'grid12',

13 gap && `gap${gap}`,

21 gap && `gap${gap}`,

14 {

22 {

15 [`justify-${justify}`]: justify,

23 [`justify-${justify}`]: justify,

src/views/Activate/ActivateView.tsx+1−2

@@ -30,8 +30,7 @@ export default function ActivateView({

30 padding={'10px'}

31 width={'512px'}

32 height={'512px'}

33− max-width={'512px'}

33+ maxWidth={'calc(100vw - 48px)'}

34− max-height={'512px'}

35 className={cn(className)}

34 className={cn(className)}

36 mb={3}>

35 mb={3}>

37 <Box gridArea="header">{header}</Box>

36 <Box gridArea="header">{header}</Box>

src/views/Invite/Cohort.scss+1

@@ -228,6 +228,7 @@

228 flex-direction: column;

229 justify-content: space-between;

230 font-weight: 500;

231+ max-width: 100%;

231

232

232 .download-buttons {

233 .download-buttons {

233 justify-content: flex-end;

234 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';

12

13import Other from './Login/Other';

14

15+import './Login.scss';

16+

15export default function Login() {

17export default function Login() {

16 // globals

18 // globals

17 const { push, names }: any = useHistory();

19 const { push, names }: any = useHistory();

@@ -60,7 +62,10 @@ export default function Login() {

60 return (

62 return (

61 <View inset>

63 <View inset>

62 <Grid>

64 <Grid>

65+ <Grid.Item

66+ full

67+ as={Text}

63− <Grid.Item full as={Text} className="flex justify-center mt9 mb7">

68+ className="flex justify-center mt9 mb7 w-max-mobile">

64 <Grid.Item as={Text}>Bridge / </Grid.Item>

69 <Grid.Item as={Text}>Bridge / </Grid.Item>

65 <Grid.Item className="fw-bold" as={Text}>

70 <Grid.Item className="fw-bold" as={Text}>

66 Log In

71 Log In

@@ -71,7 +76,12 @@ export default function Login() {

71 {flowDescription(flow)}

76 {flowDescription(flow)}

72 </Grid.Item>

77 </Grid.Item>

73 )}

78 )}

79+ <Grid.Item

80+ full

81+ as={Other}

82+ goHome={goHome}

74− <Grid.Item full as={Other} goHome={goHome} className="login-selector" />

83+ className="login-selector w-max-mobile"

84+ />

75 </Grid>

85 </Grid>

76

86

77 <Footer>

87 <Footer>

src/views/Login/LoginSelector.scss+1

@@ -74,6 +74,7 @@

74 padding: 24px;

75 font-size: 14px;

76 line-height: 24px;

77+ max-width: 100%;

77 }

78 }

78

79

79 .master-ticket {

80 .master-ticket {

src/views/Point/MigrateL2.scss+1

@@ -22,6 +22,7 @@

22 .info-row {

23 margin-bottom: 24px;

24 width: 370px;

25+ max-width: 100%;

25

26

26 .icon-background {

27 .icon-background {

27 width: 24px;

28 width: 24px;

src/views/Point/Point.scss+1

@@ -6,6 +6,7 @@

6 line-height: 24px;

7 position: relative;

8 width: 368px;

9+ max-width: 100%;

9

10

10 .title {

11 .title {

11 font-weight: 700;

12 font-weight: 700;

src/views/UrbitID/SetProxy.js+1

@@ -285,6 +285,7 @@ export default function SetProxy() {

285 <Flex.Item

286 flex

287 as={Text}

288+ style={{ overflowWrap: 'anywhere' }}

288 className={cn('mono mv3 gray4', {

289 className={cn('mono mv3 gray4', {

289 black: !completed && isProxySet,

290 black: !completed && isProxySet,

290 gray4: !completed && !isProxySet,

291 gray4: !completed && !isProxySet,

src/views/UrbitOS/UrbitOS.scss+1

@@ -11,4 +11,5 @@

11 background-color: white;

12 border-radius: $large-border-radius;

13 position: relative;

14+ max-width: 100%;

14}

15}