From 7f055ec51ff8704c389ee16e9da68cbe6dfcbfca Mon Sep 17 00:00:00 2001
From: Michael Kirk <michael.code@endoftheworl.de>
Date: Wed, 22 Jan 2025 16:09:33 -0800
Subject: [PATCH] Fix layout of maplibre controls by only using pico in
 explicit parts of the layout.

picocss is conflicting with maplibre - most notably the maplibre
controls have a silly amount of padding, so the controls look wonky.

Instead of applying picocss everywhere, we now "allow list" subtrees of
the DOM with the "pico" class.

It's kind of annoying, but it kind of seems like it has to be this way -
if we're going to have two strong design systems (pico and maplibre),
they need to be confined to their own respective domains.
---
 web/src/App.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index fb23c20..9520b7d 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -2,7 +2,7 @@
   import onewayArrowUrl from "../assets/arrow.png?url";
   import logo from "../assets/logo.svg?url";
   import About from "./About.svelte";
-  import "@picocss/pico/css/pico.jade.min.css";
+  import "@picocss/pico/css/pico.conditional.jade.min.css";
   import initLtn from "backend";
   import type { Map } from "maplibre-gl";
   import { init as initRouteSnapper } from "route-snapper-ts";
@@ -89,16 +89,18 @@
   }
 </script>
 
-<About />
+<div class="pico">
+    <About class="pico" />
+</div>
 <Layout>
-  <div slot="top" style="display: flex">
+  <div slot="top" class="pico" style="display: flex">
     <button class="outline" on:click={() => ($showAbout = true)}>
       <img src={logo} style="height: 6vh;" alt="A/B Street logo" />
     </button>
     <Settings />
     <span bind:this={topDiv} style="width: 100%" />
   </div>
-  <div slot="left">
+  <div class="pico" slot="left">
     <div bind:this={sidebarDiv} />
 
     <hr />