fix: Improves display of Moons

Author: valentine195

src/agenda/Agenda.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { getTypedContext } from "src/calendar/view.utils";
     import Flags from "../calendar/ui/Events/Flags.svelte";
-    import MoonUI from "../calendar/ui/Moon.svelte";
     import { dateString } from "src/utils/functions";
     import {
         CALENDAR_SEARCH,
@@ -10,6 +9,8 @@
         setClickableIcon,
     } from "src/utils/icons";
     import { derived, get } from "svelte/store";
+    import MoonUI from "src/calendar/ui/Moons/Moon.svelte";
+
 
     const store = getTypedContext("store");
     const parent = getTypedContext("parent");

src/calendar/ui/Day/Day.svelte

@@ -3,7 +3,6 @@
     import Dots from "../Events/Dots.svelte";
     import { TFile } from "obsidian";
     import type { CalEvent } from "src/@types";
-    import Moon from "../Moon.svelte";
     import { ViewState } from "src/stores/calendar.store";
     import Flags from "../Events/Flags.svelte";
     import { addEventWithModal } from "src/events/modal/event";
@@ -15,6 +14,7 @@
     import { isCalEvent } from "src/events/event.types";
     import { openAgendaView } from "src/agenda/view.agenda";
     import { getTypedContext } from "src/calendar/view.utils";
+    import MoonContainer from "../Moons/MoonContainer.svelte";
 
     export let month: MonthStore;
     export let day: DayOrLeapDay;
@@ -185,11 +185,7 @@
         {#key $events}
             {#if $full && $viewState != ViewState.Year}
                 {#if $displayMoons}
-                    <div class="moon-container">
-                        {#each $moons as moon}
-                            <Moon {moon} />
-                        {/each}
-                    </div>
+                    <MoonContainer moons={$moons} />
                 {/if}
                 {#key $events}
                     <Flags events={$events} />
@@ -243,9 +239,4 @@
     .opened {
         border: 2px solid var(--background-modifier-border);
     }
-
-    /* .moon-container {
-        display: flex;
-        flex-flow: row;
-    } */
 </style>

src/calendar/ui/Moon.svelte src/calendar/ui/Moons/Moon.sveltesrc/calendar/ui/Moon.svelte renamed to src/calendar/ui/Moons/Moon.svelte

@@ -9,7 +9,10 @@
     $: path = SHADOW_MAP[moon.phase ?? "New moon"];
 </script>
 
-<div aria-label={label ? `${moon.name}\n${moon.phase}` : null}>
+<div
+    class="moon-wrapper"
+    aria-label={label ? `${moon.name}\n${moon.phase}` : null}
+>
     <svg
         class="moon"
         id={moon.id}
@@ -32,4 +35,14 @@
 </div>
 
 <style>
+    .moon-wrapper,
+    .moon {
+        width: min-content;
+        height: min-content;
+        min-width: 0;
+    }
+    .moon {
+        display: flex;
+        align-items: center;
+    }
 </style>

src/calendar/ui/Moons/MoonContainer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import Moon from "./Moon.svelte";
+    import type { MoonState } from "src/schemas/calendar/moons";
+
+    export let moons: MoonState[] = [];
+    export let dayView: boolean = false;
+
+    /* export */ let width: number;
+
+    let target: HTMLElement;
+</script>
+
+<div class="moon-container" class:full={!dayView} bind:this={target}>
+    <div class="left-button"></div>
+    <div class="moons">
+        {#if target != null}
+            {#each moons as moon}
+                <Moon {moon} />
+            {/each}
+        {/if}
+    </div>
+    <div class="right-button"></div>
+</div>
+
+<style>
+    .moons {
+        display: inline-flex;
+        overflow-y: scroll;
+    }
+</style>

src/calendar/ui/Week/Week.svelte

@@ -61,7 +61,7 @@
 <style scoped>
     .week {
         display: grid;
-        grid-template-columns: repeat(var(--calendar-columns), 1fr);
+        grid-template-columns: repeat(var(--calendar-columns), minmax(0, 1fr));
         text-align: center;
     }
     .week-number {

src/settings/creator/Containers/celestials/moons/MoonInstance.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { ExtraButtonComponent } from "obsidian";
-    import MoonSVG from "src/calendar/ui/Moon.svelte";
+    import MoonSVG from "src/calendar/ui/Moons/Moon.svelte";
     import type { Moon } from "src/schemas/calendar/moons";
     import { EDIT, TRASH, setNodeIcon } from "src/utils/icons";
     import { MOON_CYCLE, MOON_OFFSET } from "src/utils/icons";