fix time/date format preferences

Author: ajgeiss0702

src/lib/ToolTip.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-		import type { Placement } from '@floating-ui/dom';
 		import Info from '$lib/svg/Info.svelte';
 		import { typed } from '$lib';
-		import {popup} from "$lib/replacements/popup.ts";
+		import { popup, type Placement, type PopupSettings } from "$lib/replacements/popup.ts";
 
 		let {
 			id = typed<string>('default'),
 			placement = typed<Placement>('top'),
 			popupClasses = typed<string>(''),
-			event = typed<'hover' | 'click' | 'hover-click' | 'focus' | 'focus-click'>('hover'),
+			event = typed<PopupSettings["event"]>('hover'),
 			icon = typed<import('svelte').Snippet>(),
 			children = typed<import('svelte').Snippet>(),
 			content = typed<import('svelte').Snippet>()
@@ -31,11 +30,11 @@
 	{#if icon}
 		{@render icon()}
 	{:else}
-		<Info classes="inline-block!" />
+		<Info />
 	{/if}
 </div>
 
-<div class={'card p-4 shadow-x1 z-10 fixed font-normal inline-block ' + popupClasses} data-popup={id} style="opacity: 0; pointer-events: none;">
+<div class={'card p-4 shadow-x1 z-10 absolute font-normal inline-block ' + popupClasses} data-popup={id} style="opacity: 0; pointer-events: none;">
 	{@render children?.()}
 	{@render content?.()}
 </div>

src/lib/replacements/popup.ts

@@ -246,8 +246,8 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
 // Popup Types
 
 /** Placement https://floating-ui.com/docs/computePosition#placement */
-type Direction = 'top' | 'bottom' | 'left' | 'right';
-type Placement = Direction | `${Direction}-start` | `${Direction}-end`;
+export type Direction = 'top' | 'bottom' | 'left' | 'right';
+export type Placement = Direction | `${Direction}-start` | `${Direction}-end`;
 
 // Options & Middleware
 export interface Middleware {

src/routes/about/+page.svelte

@@ -175,9 +175,9 @@
         </Switch>
         <br>
         <br>
-        <label class="py-1">
+        <label class="block py-1">
             <span>Date Format:</span>
-            <select class="input w-44 p-1 px-2" bind:value={dateFormat}>
+            <select class="input w-44 p-1 px-2 inline-block bg-surface-900" bind:value={dateFormat}>
                 <optgroup label="Common formats">
                     <option value="detect">auto</option>
                     <option value="en-US">US (mm/dd/yyyy)</option>
@@ -198,9 +198,9 @@
                 It will not effect anything else.
             </ToolTip>
         </label>
-        <label class="py-1">
+        <label class="block py-1">
             <span>Time Format:</span>
-            <select class="input w-44 p-1 px-2" bind:value={timeFormat}>
+            <select class="input w-44 p-1 px-2 inline-block bg-surface-900" bind:value={timeFormat}>
                 <option value="detect">auto</option>
                 <option value="12h">12 hour (AM/PM)</option>
                 <option value="24h">24 hour</option>