Make site design slightly more responsive for mobile

index.html

@@ -36,7 +36,7 @@
 		<table id="search-result-table" style="display: none;">
 			<thead>
 				<tr>
-					<th>Distance</th><th>Latitude</th><th>Longitude</th><th>Show in map</th>
+					<th>Distance</th><th class="hidable">Latitude</th><th class="hidable">Longitude</th><th>Show in map</th>
 				</tr>
 			</thead>
 			<tbody id="search-result-table-body">

src/main.ts

@@ -118,6 +118,9 @@ routeWorker.onmessage = e => {
 				latitudeCell.setHTMLUnsafe(result.latitude.toFixed(6));
 				longitudeCell.setHTMLUnsafe(result.longitude.toFixed(6));
 
+				latitudeCell.classList.add('hidable');
+				longitudeCell.classList.add('hidable');
+
 				let button = document.createElement('button');
 				buttonCell.appendChild(button);
 

src/style.css

@@ -35,7 +35,7 @@ p {
 }
 
 #settings-div {
-	width: 40vw;
+	width: max(40vw, 800px);
 	margin-left: auto;
 	margin-right: auto;
 	border-style: solid;
@@ -71,4 +71,23 @@ th {
 
 td {
 	border: solid 1px;
+}
+
+@media only screen and (max-width: 800px) {
+	.hidable {
+		display: none;
+	}
+
+	table {
+		width: max(30vw, 400px);
+	}
+
+	#settings-div {
+		width: 80vw;
+	}
+
+	.settings-line {
+		display: flex;
+		flex-direction: column;
+	}
 }