From 8d279f2641f297f575ab4b1565da1a81fc4c5f06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Lie=20Rapp?=
 <90246213+Bjoern-Rapp@users.noreply.github.com>
Date: Wed, 29 Jan 2025 17:06:43 +0100
Subject: [PATCH 1/4] scope tailwind base to wrapper.

---
 src/globals.css |   5 +-
 src/index.tsx   | 122 +++++++++++++++++++++++++-----------------------
 2 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/src/globals.css b/src/globals.css
index b5c61c95..93b72d3b 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,3 +1,6 @@
-@tailwind base;
+.lonboard {
+    @tailwind base;
+}
+
 @tailwind components;
 @tailwind utilities;
diff --git a/src/index.tsx b/src/index.tsx
index ae9a8a5b..b2c3690d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -214,67 +214,71 @@ function App() {
 
   return (
     <div
-      id={`map-${mapId}`}
-      className="flex"
-      style={{ height: mapHeight ? `${mapHeight}px` : "24rem" }}
+      className="lonboard"
     >
-      <Toolbar />
-
-      {showTooltip && highlightedFeature && (
-        <SidePanel
-          info={highlightedFeature}
-          onClose={() => actorRef.send({ type: "Close side panel" })}
-        />
-      )}
-      <div className="bg-red-800 h-full w-full relative">
-        <DeckGL
-          style={{ width: "100%", height: "100%" }}
-          initialViewState={
-            ["longitude", "latitude", "zoom"].every((key) =>
-              Object.keys(initialViewState).includes(key),
-            )
-              ? initialViewState
-              : DEFAULT_INITIAL_VIEW_STATE
-          }
-          controller={true}
-          layers={
-            bboxSelectPolygonLayer
-              ? layers.concat(bboxSelectPolygonLayer)
-              : layers
-          }
-          getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
-          pickingRadius={pickingRadius}
-          onClick={onMapClickHandler}
-          onHover={onMapHoverHandler}
-          useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
-          // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
-          _typedArrayManagerProps={{
-            overAlloc: 1,
-            poolSize: 0,
-          }}
-          onViewStateChange={(event) => {
-            const { viewState } = event;
-
-            // This condition is necessary to confirm that the viewState is
-            // of type MapViewState.
-            if ("latitude" in viewState) {
-              const { longitude, latitude, zoom, pitch, bearing } = viewState;
-              setViewState({
-                longitude,
-                latitude,
-                zoom,
-                pitch,
-                bearing,
-              });
+      <div
+        id={`map-${mapId}`}
+        className="flex"
+        style={{ height: mapHeight ? `${mapHeight}px` : "24rem" }}
+      >
+        <Toolbar />
+
+        {showTooltip && highlightedFeature && (
+          <SidePanel
+            info={highlightedFeature}
+            onClose={() => actorRef.send({ type: "Close side panel" })}
+          />
+        )}
+        <div className="bg-red-800 h-full w-full relative">
+          <DeckGL
+            style={{ width: "100%", height: "100%" }}
+            initialViewState={
+              ["longitude", "latitude", "zoom"].every((key) =>
+                Object.keys(initialViewState).includes(key),
+              )
+                ? initialViewState
+                : DEFAULT_INITIAL_VIEW_STATE
             }
-          }}
-          parameters={parameters || {}}
-        >
-          <Map
-            mapStyle={mapStyle || DEFAULT_MAP_STYLE}
-            customAttribution={customAttribution}
-          ></Map>
-        </DeckGL>
+            controller={true}
+            layers={
+              bboxSelectPolygonLayer
+                ? layers.concat(bboxSelectPolygonLayer)
+                : layers
+            }
+            getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
+            pickingRadius={pickingRadius}
+            onClick={onMapClickHandler}
+            onHover={onMapHoverHandler}
+            useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
+            // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
+            _typedArrayManagerProps={{
+              overAlloc: 1,
+              poolSize: 0,
+            }}
+            onViewStateChange={(event) => {
+              const { viewState } = event;
+
+              // This condition is necessary to confirm that the viewState is
+              // of type MapViewState.
+              if ("latitude" in viewState) {
+                const { longitude, latitude, zoom, pitch, bearing } = viewState;
+                setViewState({
+                  longitude,
+                  latitude,
+                  zoom,
+                  pitch,
+                  bearing,
+                });
+              }
+            }}
+            parameters={parameters || {}}
+          >
+            <Map
+              mapStyle={mapStyle || DEFAULT_MAP_STYLE}
+              customAttribution={customAttribution}
+            ></Map>
+          </DeckGL>
+        </div>
       </div>
     </div>
   );

From 29af7931d78c7f47813ade62e9cd89c951dc8c2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Lie=20Rapp?=
 <90246213+Bjoern-Rapp@users.noreply.github.com>
Date: Thu, 30 Jan 2025 14:43:37 +0100
Subject: [PATCH 2/4] duplicate CSS-properties targeting html, body and :root

---
 src/globals.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/globals.css b/src/globals.css
index 93b72d3b..89da393b 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,4 +1,17 @@
-.lonboard {
+div.lonboard {
+    color: #11181c;
+    color: hsl(var(--nextui-foreground));
+    background-color: #fff;
+    background-color: hsl(var(--nextui-background));
+    margin: 0;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+
     @tailwind base;
 }
 

From 7ce0e7bcb01b6db0af52750b900bfbdfd6a3eaed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Lie=20Rapp?=
 <90246213+Bjoern-Rapp@users.noreply.github.com>
Date: Thu, 30 Jan 2025 15:04:20 +0100
Subject: [PATCH 3/4] run prettier.

---
 src/globals.css | 39 ++++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/globals.css b/src/globals.css
index 89da393b..25ad1403 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,18 +1,31 @@
 div.lonboard {
-    color: #11181c;
-    color: hsl(var(--nextui-foreground));
-    background-color: #fff;
-    background-color: hsl(var(--nextui-background));
-    margin: 0;
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
-    font-feature-settings: normal;
-    font-variation-settings: normal;
-    -webkit-tap-highlight-color: transparent;
+  color: #11181c;
+  color: hsl(var(--nextui-foreground));
+  background-color: #fff;
+  background-color: hsl(var(--nextui-background));
+  margin: 0;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Ubuntu,
+    Cantarell,
+    Noto Sans,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    Segoe UI Symbol,
+    "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
 
-    @tailwind base;
+  @tailwind base;
 }
 
 @tailwind components;

From 32c17176552c0ada6575c2b946a98fbdb6bb73d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Lie=20Rapp?=
 <90246213+Bjoern-Rapp@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:09:59 +0100
Subject: [PATCH 4/4] run prettier on index.tsx

---
 src/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index b2c3690d..a2b17a03 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -213,9 +213,7 @@ function App() {
   );
 
   return (
-    <div
-      className="lonboard"
-    >
+    <div className="lonboard">
       <div
         id={`map-${mapId}`}
         className="flex"
@@ -249,7 +247,9 @@ function App() {
             pickingRadius={pickingRadius}
             onClick={onMapClickHandler}
             onHover={onMapHoverHandler}
-            useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
+            useDevicePixels={
+              isDefined(useDevicePixels) ? useDevicePixels : true
+            }
             // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
             _typedArrayManagerProps={{
               overAlloc: 1,