improve mobile/touch controls

src/components/Accordion.module.css

@@ -45,7 +45,7 @@
 }
 
 .Body {
-  padding: 10px;
+  padding: 16px 12px 10px 12px;
 }
 
 @keyframes slideDown {

src/components/InspectorControls.module.css

@@ -80,14 +80,6 @@
   margin: 0 0 8px 0;
 }
 
-.CheckboxField:has(.Description) {
-  margin: 0 0 6px 0;
-}
-
-/* .Field:not(:has(.Description)) + .CheckboxField {
-  margin-top: 10px;
-} */
-
 .CheckboxField input[type="checkbox"] {
   margin-left: 0;
   grid-column: 1;
@@ -104,7 +96,7 @@
 
 .Description {
   font-size: 12px;
-  line-height: 1.3333;
+  line-height: 1.5;
   opacity: 0.6;
   margin: 2px 0 0 0;
   padding: 0;
@@ -289,18 +281,23 @@
     margin-bottom: 20px;
   }
 
-  .Field:has(.Description) {
-    margin-bottom: 20px;
+  .CheckboxField {
+    margin-bottom: 16px;
+  }
+
+  .Description {
+    font-size: 13px;
+    line-height: calc(20 / 13);
   }
 
   .Field label,
   .CheckboxField .Label {
-    font-size: 14px;
+    font-size: 15px;
   }
 
   .CheckboxField input[type="checkbox"] {
-    width: 18px;
-    height: 18px;
+    min-width: 19px;
+    min-height: 19px;
     padding-right: 6px;
   }
 

src/components/MapInspector.module.css

@@ -166,4 +166,14 @@
     background: rgba(0, 0, 0, 0.7);
     z-index: 2;
   }
+
+  .CancelButton {
+    display: none;
+  }
+}
+
+@media (pointer: coarse) {
+  .ToggleSidebarButton {
+    font-size: 28px;
+  }
 }

src/components/MapInspector.tsx

@@ -195,10 +195,7 @@ export function MapInspector() {
   const invalidateRef = useRef<InvalidateFunction | null>(null);
 
   const handleOpenMapInfo = useCallback(() => setMapInfoOpen(true), []);
-  const handleOpenScoreScreen = useCallback(
-    () => setScoreScreenOpen(true),
-    [],
-  );
+  const handleOpenScoreScreen = useCallback(() => setScoreScreenOpen(true), []);
   const handleOpenServerBrowser = useCallback(() => {
     setServerBrowserOpen(true);
   }, []);
@@ -253,6 +250,7 @@ export function MapInspector() {
               missionType={choosingMap ? "" : missionType}
               onChange={changeMission}
               autoFocus={choosingMap}
+              onCancel={handleCancelChoosingMap}
             />
             {choosingMap && (
               <button

src/components/MissionSelect.tsx

@@ -158,6 +158,7 @@ export function MissionSelect({
   onChange,
   disabled,
   autoFocus,
+  onCancel,
 }: {
   value: string;
   missionType: string;
@@ -170,6 +171,7 @@ export function MissionSelect({
   }) => void;
   disabled?: boolean;
   autoFocus?: boolean;
+  onCancel: () => void;
 }) {
   const [searchValue, setSearchValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -202,6 +204,13 @@ export function MissionSelect({
 
   const isOpen = useStoreState(combobox, "open");
 
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current?.focus();
+      combobox.show();
+    }
+  }, [autoFocus, combobox]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -341,7 +350,8 @@ export function MissionSelect({
         className={styles.CloseButton}
         data-open={isOpen}
         onClick={() => {
-          combobox.setOpen(false);
+          combobox.hide();
+          onCancel?.();
         }}
       >
         <IoMdCloseCircle />