style.css more css for mobile

src/style.css

@@ -16,8 +16,8 @@ body {
 	/* speocifically for mobile when keyboard is open */
 	position: relative;
 
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-		sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+		sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 h1 {
 	margin-top: 0;
@@ -102,7 +102,7 @@ hr {
 label {
 	cursor: pointer;
 }
-[class*="hint--"]:after {
+[class*='hint--']:after {
 	text-transform: none;
 	font-weight: normal;
 	letter-spacing: 0.5px;
@@ -126,8 +126,8 @@ a > svg {
 	fill: rgba(255, 255, 255, 0.2);
 }
 select,
-input[type="text"],
-input[type="number"],
+input[type='text'],
+input[type='number'],
 textarea {
 	padding: 3px 5px;
 	font-size: inherit;
@@ -196,7 +196,7 @@ textarea {
 	display: block;
 }
 .star:after {
-	content: "★";
+	content: '★';
 	color: #eee333;
 }
 /* used to show keyboard specific content when something is keyboard focused */
@@ -1195,7 +1195,7 @@ body:not(.is-app) .show-when-app {
 	transform: scale(1.15);
 }
 .onboard-selection.selected:after {
-	content: "";
+	content: '';
 	position: absolute;
 	right: -20px;
 	bottom: 40px;
@@ -1234,15 +1234,24 @@ body:not(.is-app) .show-when-app {
 }
 
 @media screen and (max-width: 500px) {
+	body {
+		font-size: 70%;
+	}
 	.main-header {
 		overflow-x: auto;
 	}
 	.main-header__btn-wrap {
 		flex-shrink: 0;
 	}
+	.modal__content {
+		padding: 1em;
+	}
+	.saved-items-pane {
+		width: 77vw;
+		padding: 10px 20px;
+	}
 }
 
-
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */
 .cm-s-paraiso-dark.CodeMirror {