Responsive improvements

src/components/Sidebar.vue

@@ -112,6 +112,20 @@ export default defineComponent({
 				margin-left: 1rem;
 			}
 		}
+
+		@media (max-width: 30rem) {
+			flex-direction: column;
+			align-items: flex-end;
+			margin: 0;
+			position: absolute;
+			right: 0.5rem;
+			top: 0.5rem;
+
+			button + button {
+				margin-left: 0;
+				margin-top: 1rem;
+			}
+		}
 	}
 
 	.sidebar__section {
@@ -137,5 +151,18 @@ export default defineComponent({
 			will-change: transform;
 		}
 	}
+
+	@media (max-width: 30rem), (max-height: 30rem) {
+		padding: 0.5rem;
+	}
+
+	@media (max-width: 30rem) {
+		padding-right: 6.5rem;
+	}
+
+	@media (max-width: 20rem) {
+		box-sizing: border-box;
+		width: 100%;
+	}
 }
 </style>

src/leaflet/control/DynmapLayerControl.ts

@@ -17,7 +17,7 @@
  *    limitations under the License.
  */
 
-import {Util, Control, DomEvent, LeafletEvent, Map, Layer} from 'leaflet';
+import {Util, Control, DomEvent, LeafletEvent, Map, Layer, DomUtil} from 'leaflet';
 import layers from '@/assets/icons/layers.svg';
 import LayersObject = Control.LayersObject;
 import LayersOptions = Control.LayersOptions;
@@ -53,6 +53,15 @@ export class DynmapLayerControl extends Control.Layers {
 		return !!super._getLayer(Util.stamp(layer));
 	}
 
+	expand() {
+		// @ts-ignore
+		DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+
+		// @ts-ignore
+		super._checkDisabledLayers();
+		return this;
+	}
+
 	_addItem(obj: any) {
 		const container = obj.overlay ? this._overlaysList : this._baseLayersList,
 			item = document.createElement('label'),

src/scss/leaflet/_controls.scss

@@ -102,6 +102,18 @@
 			margin-left: 2rem;
 		}
 	}
+
+	@media (max-width: 37.5rem) {
+		.region {
+			display: none;
+		}
+	}
+
+	@media (max-width: 24rem) {
+		.chunk {
+			display: none;
+		}
+	}
 }
 
 .leaflet-control-layers {
@@ -115,6 +127,9 @@
 
 	.leaflet-control-layers-list {
 		padding: 0.7rem 1.5rem;
+		height: 100%;
+    	box-sizing: border-box;
+		overflow: auto;
 
 		.layer {
 			cursor: pointer;
@@ -126,6 +141,7 @@
 .leaflet-control-logo {
 	width: 5rem;
 	height: 5rem;
+	flex-shrink: 0;
 
 	a {
 		height: 100%;
@@ -147,6 +163,10 @@
 	.leaflet-control {
 		margin: 0;
 	}
+
+	@media (max-width: 25rem), (max-height: 30rem) {
+		padding-left: 0.5rem;
+	}
 }
 
 .leaflet-top {
@@ -190,6 +210,23 @@
 		margin-top: auto;
 		order: 1000;
 	}
+
+	.leaflet-control-zoom {
+		flex-shrink: 0;
+
+		@media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) {
+			display: none;
+
+			& + .leaflet-control {
+				margin-top: 0;
+			}
+		}
+	}
+
+	@media (max-width: 25rem), (max-height: 30rem) {
+		padding-top: 0.5rem;
+		bottom: 6.5rem;
+	}
 }
 
 .leaflet-bottom {
@@ -199,6 +236,10 @@
 	&.leaflet-left .leaflet-control + .leaflet-control {
 		margin-left: 1rem;
 	}
+
+	@media (max-width: 25rem), (max-height: 30rem) {
+		padding-bottom: 0.5rem;
+	}
 }
 
 .leaflet-center {

src/scss/style.scss

@@ -276,6 +276,11 @@ button {
 			font-size: 3rem;
 		}
 	}
+
+	@media (max-width: 30rem), (max-height: 30rem) {
+		transform: scale(calc((1/6)*5));
+    	transform-origin: top center
+	}
 }
 
 /*******************