address design comments; ran formatter.

src/lib/components/dualTimeView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { type ComponentProps } from 'svelte';
     import { capitalize } from '$lib/helpers/string';
-    import { getUTCOffset, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
+    import { timeFromNow, toLocaleDateTime, toLocalDateTimeISO } from '$lib/helpers/date';
     import { Badge, InteractiveText, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
 
     export let time: string = '';
@@ -70,7 +70,7 @@
 </script>
 
 <Popover let:show let:hide {placement} portal>
-    <button on:mouseenter={() => setTimeout(show, 100)} on:mouseleave={() => hidePopover(hide)}>
+    <button on:mouseenter={() => setTimeout(show, 150)} on:mouseleave={() => hidePopover(hide)}>
         <slot>{capitalize(timeFromNow(time))}</slot>
     </button>
 
@@ -92,23 +92,31 @@
 
             <!-- `Absolute time` as per design -->
             <Layout.Stack gap="xxs">
-                <Layout.Stack direction="row" justifyContent="space-between">
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    alignContent="center"
+                    justifyContent="space-between">
                     <InteractiveText
                         isVisible
                         variant="copy"
                         text={toLocaleDateTime(time, 'UTC')}
-                        value={new Date(toLocaleDateTime(time, 'UTC')).toISOString()} />
+                        value={new Date(time).toISOString()} />
 
                     <Badge variant="secondary" content="UTC" size="xs" />
                 </Layout.Stack>
 
-                <Layout.Stack direction="row" justifyContent="space-between">
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    alignContent="center"
+                    justifyContent="space-between">
                     <InteractiveText
                         isVisible
                         variant="copy"
                         text={toLocaleDateTime(time)}
-                        value={new Date(toLocaleDateTime(time)).toISOString()} />
-                    <Badge variant="secondary" content="UTC{getUTCOffset()}" size="xs" />
+                        value={toLocalDateTimeISO(time)} />
+                    <Badge variant="secondary" content="Local time" size="xs" />
                 </Layout.Stack>
             </Layout.Stack>
         </Layout.Stack>

src/lib/helpers/date.ts

@@ -86,6 +86,29 @@ export const toLocaleTimeISO = (datetime: string | number) => {
     return date.toLocaleTimeString('sv');
 };
 
+/**
+ * Returns a local datetime string in ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sss),
+ * matching local time, without the 'Z' suffix.
+ *
+ * @returns Local ISO string (with ms) or 'n/a' if invalid
+ */
+export const toLocalDateTimeISO = (datetime: string | number): string => {
+    const date = new Date(datetime);
+
+    if (isNaN(date.getTime())) {
+        return 'n/a';
+    }
+
+    // Get timezone offset in minutes, convert to ms
+    const tzOffsetMs = date.getTimezoneOffset() * 60 * 1000;
+
+    // Shift date to local time
+    const local = new Date(date.getTime() - tzOffsetMs);
+
+    // Drop the trailing 'Z' to keep it as local
+    return local.toISOString().replace('Z', '');
+};
+
 export const utcHourToLocaleHour = (utcTimeString: string) => {
     const now = new Date();
     const [hours, minutes] = utcTimeString.split(':').map(Number);

src/lib/layout/createProject.svelte

@@ -61,11 +61,7 @@
                                 }}><Icon icon={IconPencil} /> Project ID</Tag>
                         </div>
                     {/if}
-                    <CustomId
-                        bind:show={showCustomId}
-                        name="Project"
-                        isProject
-                        bind:id />
+                    <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
                 </Layout.Stack>
                 {#if isCloud && regions.length > 0}
                     <Layout.Stack gap="xs"

src/routes/(console)/organization-[organization]/createProject.svelte

@@ -61,12 +61,7 @@
                 </Tag>
             </span>
         {:else}
-            <CustomId
-                autofocus
-                bind:show={showCustomId}
-                name="Project"
-                isProject
-                bind:id />
+            <CustomId autofocus bind:show={showCustomId} name="Project" isProject bind:id />
         {/if}
     </Layout.Stack>
 

src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte

@@ -11,7 +11,7 @@
     import { updateBucket } from './+page.svelte';
     import type { Plan } from '$lib/sdk/billing';
     import type { Models } from '@appwrite.io/console';
-    
+
     export let bucket: Models.Bucket;
     export let currentPlan: Plan | null;