New mobile-only layout

[Umpriel]

- Collapsible Search that closes Info modal when opened - Controlled info modal that closes search box if opened - Smaller info block and layer toggles - Layer toggles in a column - Compact credits attribution

Things to highlight:

• I tried to solve the info btns overflow on smaller screen as indicated by the following pic:

Could not achieve a clean solution without introducing a new mobile layout under Home.svelte 170
The solution i attempted involved spreading the btns in a single row ( on the height level of btn id="info") but only when the collapsableModal is opened and when the modal is closed, they return to their column stack. This saved vertical space and solved the overflow. This issue arises only on tiny screens such as the iphone SE Dimensions: 375X667

• The terrain toggle might need a prominent border-color because now that it became smaller, it might be harder to see when flying on top of Land. Did not change the color because it's unrelated to mobile layout.

[Umpriel]

Partially related to #56 with regards to the layout but not the viewport issue (the void).

[ryan-berger]

nit:

I initially thought this was to solve a render-order bug, meaning that #search-widget hadn't been rendered before this code was called, or was outside of Svelte's sphere of rendering.

I now realize it is because it is display: none.

Could a small comment along the lines of "only instantiate the searchbox for on non-mobile devices?" to clarify?

[Umpriel]

Sure, is the following satisfactory?

    // #search-widget is hidden (display: none) on mobile until the user expands search; 
   // we still mount here so the box is ready. Guard in case the node isn't available yet.
    const container = document.querySelector('#search-widget');
    if (container) {
      // @ts-expect-error: MapboxSearchBox is a custom element
      container.appendChild(searchBox);
    }
  });

[ryan-berger]

Yeah, that sounds good to me! Thanks!

[tombh]

Nice! I've deployed the branch to a dev URL https://0a4b5a44-viewview.tom-364.workers.dev

This is great and pretty much good to go, just some minor cleanup:

1. There's an errant commit from me in the PR, you may need to update your fork and rebase.
2. Widths ~730px to 600px still have some search bar overlap.
3. The orange borders have disappeared from the layout toggles in the bottom left. I wonder if that's caused by the extra colon on the ::root CSS definition?
4. What about using a CSS variable for the mobile width? Like --mobile-break: 600px. I think you could follow the same approach as I used for the --primary-colour etc?
5. createEventDispatcher is deprecated now apparently. I think I should have just used the $state rune to begin with? Therefore: let isOpen = $state(false); That way you get the automatic rerender on state change.
6. I think the search box has enough associated code that it could graduate to its own file now? Like SearchBox.svelte. No need to change anything, just a place to put all the search box CSS at least.

[Umpriel]

1. There's an errant commit from me in the PR, you may need to update your fork and rebase.

2. Widths 730px to 600px still have some search bar overlap

3. The orange borders have disappeared from the layout toggles in the bottom left. I wonder if that's caused by the extra colon on the ::root CSS definition? yes it was. A humble typo.

4. What about using a CSS variable for the mobile width? Like --mobile-break: 600px. I think you could follow the same approach as I used for the --primary-colour etc? Tom introduced $mobile-break scss var

5. createEventDispatcher is deprecated now apparently. I think I should have just used the $state rune to begin with? Therefore: let isOpen = $state(false); That way you get the automatic rerender on state change.

6. I think the search box has enough associated code that it could graduate to its own file now? Like SearchBox.svelte. No need to change anything, just a place to put all the search box CSS at least. Done components/SearchBox.svelte

[tombh]

2. Yeah I think starting is probably right 730px
3. I just pushed a new update to main so that you can use SASS vars in Svelte <style> blocks, like so:

<style lang="scss">
	@use "./styles/variables.scss" as *;
	.foo {
		color: $primary-colour;
	}
</style>

[tombh]

Oh, just saw your comment on 5. It would still be good to not use the deprecated function. Can everything you need be done with just the global isInfoOpen?

[tombh]

Let's go! Deployed dev build to https://40018157-viewview.tom-364.workers.dev