Prepare items with user-content for long words

hplush · Jan 8, 2024 · 4d796a9 · 4d796a9
1 parent f09fa1f
commit 4d796a9
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 7 deletions.
diff --git a/web/stories/pages/feeds/add.stories.svelte b/web/stories/pages/feeds/add.stories.svelte
@@ -20,6 +20,8 @@
           href="https://example.com/news.atom" />
         <link rel="alternate" type="application/rss+xml"
           href="https://example.com/comments.rss" />
+        <link rel="alternate" type="application/rss+xml"
+          href="https://example.com/long.atom" />
       </head>
       <body></body>
     </html>
@@ -39,7 +41,7 @@
     <feed xmlns="http://www.w3.org/2005/Atom">
       <title>Example News</title>
       <updated>2021-01-01T00:00:00Z</updated>
-      <id>https://example.com/ews.atom</id>
+      <id>https://example.com/news.atom</id>
       <entry>
         <title>A big changes for Example with <i>XSS</i></title>
         <link href="https://example.com/news/1" />
@@ -65,6 +67,21 @@
     </rss>`,
     contentType: 'application/rss+xml'
   }
+  const LONG_ATOM = {
+    body: `<?xml version="1.0" encoding="utf-8"?>
+    <feed xmlns="http://www.w3.org/2005/Atom">
+      <title>PneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosis</title>
+      <updated>2021-01-01T00:00:00Z</updated>
+      <id>https://example.com/long.atom</id>
+      <entry>
+        <title>A big changes for Example with <i>XSS</i></title>
+        <link href="https://example.com/long/1" />
+        <id>https://example.com/long/1</id>
+        <updated>2021-01-01T00:00:00Z</updated>
+      </entry>
+    </feed>`,
+    contentType: 'application/atom+xml'
+  }
 </script>
 
 <Story name="Empty" parameters={{ layout: 'fullscreen' }}>
@@ -104,6 +121,7 @@
     responses={{
       'https://example.com': HTML_WITH_LINKS,
       'https://example.com/comments.rss': RSS,
+      'https://example.com/long.atom': LONG_ATOM,
       'https://example.com/news.atom': ATOM
     }}
   >

diff --git a/web/stories/pages/feeds/categories.stories.svelte b/web/stories/pages/feeds/categories.stories.svelte
@@ -24,7 +24,8 @@
     {
       categoryId: 'code',
       title:
-        'Very long title of the feed where we discuss should we use TypeScript or a better typed language'
+        'Pneumonoultramicroscopicsilicovolcanoconiosis' +
+        'Pneumonoultramicroscopicsilicovolcanoconiosis'
     },
     { categoryId: 'unknown', title: 'Broken category' },
     { title: 'My friend' }

diff --git a/web/stories/ui/card-link.stories.svelte b/web/stories/ui/card-link.stories.svelte
@@ -98,10 +98,14 @@
     </Card>
   </Section>
 
-  <Section hover width={500}>
+  <Section hover width={300}>
     <Card>
       <CardLinks>
-        <CardLink name="First" current first />
+        <CardLink
+          name="Pneumonoultramicroscopicsilicovolcanoconiosis"
+          current
+          first
+        />
       </CardLinks>
     </Card>
   </Section>

diff --git a/web/stories/ui/navbar.stories.svelte b/web/stories/ui/navbar.stories.svelte
@@ -21,7 +21,13 @@
 </Story>
 
 <Story name="Fast" parameters={{ layout: 'fullscreen' }}>
-  <Scene route={{ params: { category: 'general' }, route: 'fast' }}>
+  <Scene
+    categories={[
+      { id: 'a', title: 'Pneumonoultramicroscopicsilicovolcanoconiosis' }
+    ]}
+    feeds={[{ categoryId: 'a', reading: 'fast' }, { reading: 'fast' }]}
+    route={{ params: { category: 'general' }, route: 'fast' }}
+  >
     <Navbar />
   </Scene>
 </Story>

diff --git a/web/ui/card-link.svelte b/web/ui/card-link.svelte
@@ -60,6 +60,7 @@
     color: inherit;
     text-align: left;
     text-decoration: none;
+    word-break: break-all;
     background: none;
     border: none;
     border-top: 1px solid var(--border-color);

diff --git a/web/ui/icon.svelte b/web/ui/icon.svelte
@@ -21,6 +21,7 @@
     position: relative;
     top: var(--icon-compensate);
     display: block;
+    flex-shrink: 0;
     width: var(--icon-size);
     height: var(--icon-size);
     margin: var(--icon-move);

diff --git a/web/ui/navbar/item.svelte b/web/ui/navbar/item.svelte
@@ -49,7 +49,7 @@
     {#if icon}
       <Icon path={icon} />
     {/if}
-    <slot />
+    <span class="navbar-item_text"><slot /></span>
     {#if hotkey}
       <Hotkey {hotkey} />
     {/if}
@@ -68,7 +68,7 @@
     {#if icon}
       <Icon path={icon} />
     {/if}
-    <slot />
+    <span class="navbar-item_text"><slot /></span>
     {#if hotkey}
       <Hotkey {hotkey} />
     {/if}
@@ -85,6 +85,7 @@
     justify-content: flex-start;
     height: var(--control-height);
     padding: 0 var(--padding-l);
+    overflow: hidden;
     font: var(--control-font);
     color: var(--text-color);
     text-decoration: none;
@@ -118,6 +119,12 @@
     }
   }
 
+  .navbar-item_text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .navbar-item.is-secondary:focus-visible::after {
     position: absolute;
     inset-block: 0;