From 7897ce73541a3f7db4858271658919881f74c683 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 20 Feb 2024 16:46:59 +0100
Subject: [PATCH] fix(webui): UpEntry (selector) correct overflow

also add stories
---
 .../src/lib/components/display/UpEntry.svelte | 18 +++++--
 webui/src/stories/Selector.stories.ts         |  8 ++++
 webui/src/stories/UpEntry.stories.ts          | 47 +++++++++++++++++++
 webui/src/stories/common.ts                   |  2 +
 4 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 webui/src/stories/UpEntry.stories.ts

diff --git a/webui/src/lib/components/display/UpEntry.svelte b/webui/src/lib/components/display/UpEntry.svelte
index 8fca93f..73cd35b 100644
--- a/webui/src/lib/components/display/UpEntry.svelte
+++ b/webui/src/lib/components/display/UpEntry.svelte
@@ -2,6 +2,7 @@
 	import type { UpEntry } from '@upnd/upend';
 	import { attributeLabels } from '$lib/util/labels';
 	import UpObject from './UpObject.svelte';
+	import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
 	export let resolve = true;
 
 	export let entry: UpEntry;
@@ -12,13 +13,13 @@
 		<UpObject plain link address={entry.entity} labels={resolve ? undefined : []} />
 	</div>
 	<div class="attribute" title={entry.attribute}>
-		{$attributeLabels[entry.attribute] || entry.attribute}
+		<Ellipsis value={$attributeLabels[entry.attribute] || entry.attribute} />
 	</div>
 	<div class="value value-{entry.value.t.toLowerCase()}">
 		{#if entry.value.t === 'Address'}
 			<UpObject link address={entry.value.c} labels={resolve ? undefined : []} />
 		{:else}
-			{entry.value.c}
+			<Ellipsis value={entry.value.c} />
 		{/if}
 	</div>
 </div>
@@ -41,14 +42,21 @@
 	}
 
 	.attribute {
+		position: relative;
+		top: 0.2em;
 		flex-grow: 1;
 		text-align: center;
 		font-weight: 300;
-		&::before {
-			content: '→\00a0';
-		}
 		&::after {
 			content: '\00a0→';
+
+			position: absolute;
+			top: calc(-50% + 2px);
+			left: calc(50% - 2px);
+
+			transform: translateX(-50%);
+			font-size: 0.66em;
+			font-weight: normal;
 		}
 	}
 
diff --git a/webui/src/stories/Selector.stories.ts b/webui/src/stories/Selector.stories.ts
index 659d22b..654733c 100644
--- a/webui/src/stories/Selector.stories.ts
+++ b/webui/src/stories/Selector.stories.ts
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
 import Selector from '../lib/components/utils/Selector.svelte';
+import NarrowDecorator from './NarrowDecorator.svelte';
 
 const meta: Meta<Selector> = {
 	title: 'Widgets/Selector',
@@ -80,3 +81,10 @@ export const MultipleValues: Story = {
 		types: ['String', 'Number']
 	}
 };
+
+export const Narrow: Story = {
+	args: {
+		types: AllValues.args!.types
+	},
+	decorators: [() => NarrowDecorator as any]
+};
diff --git a/webui/src/stories/UpEntry.stories.ts b/webui/src/stories/UpEntry.stories.ts
new file mode 100644
index 0000000..bc64910
--- /dev/null
+++ b/webui/src/stories/UpEntry.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { UpEntry, UpListing } from '@upnd/upend';
+import { entryAddress, videoAddress } from './common';
+import NarrowDecorator from './NarrowDecorator.svelte';
+import UpEntryComponent from '../lib/components/display/UpEntry.svelte';
+
+const entry = new UpEntry(
+	entryAddress,
+	{
+		entity: videoAddress,
+		attribute: 'ATTRIBUTE_PERHAPS_LONG',
+		value: { t: 'String', c: 'This Is A Video' },
+		provenance: 'MOCK',
+		timestamp: new Date().toISOString()
+	},
+	new UpListing({})
+);
+
+const meta: Meta<UpEntryComponent> = {
+	title: 'Display/UpEntry',
+	component: UpEntryComponent,
+	tags: ['autodocs'],
+	args: {
+		entry
+	},
+	argTypes: {
+		address: {
+			defaultValue: entry,
+			name: 'Entry'
+		},
+		onResolved: {
+			action: 'resolved'
+		}
+	}
+};
+
+export default meta;
+type Story = StoryObj<UpEntryComponent>;
+
+export const Default: Story = {};
+
+export const Overflow: Story = {
+	args: {
+		labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]
+	},
+	decorators: [() => NarrowDecorator as any]
+};
diff --git a/webui/src/stories/common.ts b/webui/src/stories/common.ts
index a500f8a..1e49ef1 100644
--- a/webui/src/stories/common.ts
+++ b/webui/src/stories/common.ts
@@ -7,3 +7,5 @@ export const videoAddress = 'zb2rhnhv2Me2ZWohSYp7kyf1KAQbZ1zsLficHsaWTgoex67iJ';
 export const videoVerticalAddress = 'zb2rhocWjf4rc39Wi7TDv6KaVxs2iTQqN6CVYR6m7M8AYgp9c';
 
 export const stlAddress = 'zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf';
+
+export const entryAddress = 'zb2rhkxWUCBYuXGF4dCEDWrR48V19ujimULcSGvThknLEBrDm';