fix: Fix various issues

packages/ui/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -22,8 +22,8 @@ export interface BreadcrumbsProps extends HStackProps {
  */
 const BreadcrumbsRoot = memo(function Breadcrumbs({ children, ...props }: BreadcrumbsProps) {
   return (
-    <nav aria-label="Breadcrumb">
-      <HStack align="center" as="ol" gap={2} {...props}>
+    <nav aria-label="Breadcrumb" className="min-w-0 flex-1">
+      <HStack align="center" as="ol" gap={2} {...props} className={cn('min-w-0', props.className)}>
         {children}
       </HStack>
     </nav>
@@ -64,7 +64,7 @@ const BreadcrumbsItem = memo(function BreadcrumbsItem({
     <li
       aria-current={isCurrent ? 'page' : undefined}
       className={cn(
-        'group flex items-center transition-all duration-200',
+        'group flex items-center transition-all duration-200 min-w-0 flex-shrink',
         !isCurrent && isClickable && 'cursor-pointer',
         className
       )}
@@ -73,7 +73,7 @@ const BreadcrumbsItem = memo(function BreadcrumbsItem({
       <Text
         as={resolvedHref ? 'a' : onClick ? 'button' : 'span'}
         className={cn(
-          'transition-all duration-200',
+          'transition-all duration-200 block truncate',
           !isCurrent && 'group-hover:text-[var(--rb-text)] group-hover:underline underline-offset-4'
         )}
         color={isCurrent ? 'default' : 'muted'}
@@ -81,6 +81,7 @@ const BreadcrumbsItem = memo(function BreadcrumbsItem({
         size="m"
         type="label"
         onClick={onClick}
+        overflow="ellipsis"
       >
         {children}
       </Text>
@@ -110,7 +111,7 @@ const BreadcrumbsSeparator = memo(function BreadcrumbsSeparator({
   return (
     <li
       aria-hidden="true"
-      className={cn('text-[var(--rb-muted-text)]', className)}
+      className={cn('flex-shrink-0 text-[var(--rb-muted-text)]', className)}
       data-testid={testId}
     >
       <Text color="muted" size="m" type="label">

packages/ui/src/components/Page/PageHead/PageHead.tsx

@@ -97,11 +97,11 @@ export const PageHead = ({
     <PageContainer paddingY="medium">
       <VStack align="stretch" gap={6}>
         <HStack align="center" justify="between">
-          <HStack align="center" gap={4}>
-            {addonLeft && <div>{addonLeft}</div>}
-            {breadcrumbs && <div className="hidden sm:block">{breadcrumbs}</div>}
+          <HStack align="center" className="min-w-0 flex-1" gap={4}>
+            {addonLeft && <div className="min-w-0 flex-shrink">{addonLeft}</div>}
+            {breadcrumbs && <div className="min-w-0 flex-shrink">{breadcrumbs}</div>}
           </HStack>
-          {addonRight && <div>{addonRight}</div>}
+          {addonRight && <div className="flex-shrink-0 ml-4">{addonRight}</div>}
         </HStack>
         <VStack gap={4}>
           <Header level={1}>{heading}</Header>
@@ -121,8 +121,8 @@ export const PageHead = ({
     <PageContainer paddingY="none">
       <HStack align="center" className="h-14" justify="between">
         <HStack align="center" className="min-w-0 flex-1" gap={4}>
-          {addonLeft && <div className="flex-shrink-0">{addonLeft}</div>}
-          <Header level={4} overflow="ellipsis">
+          {addonLeft && <div className="min-w-0 flex-shrink">{addonLeft}</div>}
+          <Header className="min-w-0" level={4} overflow="ellipsis">
             {heading}
           </Header>
         </HStack>
@@ -145,14 +145,14 @@ export const PageHead = ({
         </div>
       )}
 
-      {/* Collapsed Content: Fixed overlay for collapsible, or absolute/relative within sticky/fixed root */}
+      {/* Collapsed Content: Fixed overlay for collapsible, or relative within sticky/fixed root */}
       <div
         className={cn(
           'z-20 transition-all duration-300 transform bg-[var(--rb-background)]/90 backdrop-blur-md border-b border-[var(--rb-outline)]/10 shadow-md',
           isAlwaysCollapsed || (isCollapsible && isCollapsed)
             ? 'translate-y-0 opacity-100'
             : '-translate-y-full opacity-0 pointer-events-none',
-          isCollapsible ? 'fixed top-0 left-0 right-0' : 'absolute top-0 left-0 right-0'
+          isCollapsible ? 'fixed top-0 left-0 right-0' : 'relative'
         )}
       >
         {collapsedContent}

services/www/src/app/index.tsx

@@ -20,7 +20,11 @@ function HomePage(): React.JSX.Element {
     <DefaultLayout
       centerVertically
       currentPath={localePath('/')}
-      headerAddonLeft={<Header level={3}>{SITE_TITLE}</Header>}
+      headerAddonLeft={
+        <Header className="min-w-0" level={3} overflow="ellipsis">
+          {SITE_TITLE}
+        </Header>
+      }
     >
       <VStack gap={24}>
         <Header delay={0} level={1}>

services/www/src/app/wanted/index.i18n.ts

@@ -57,6 +57,18 @@ export const { t } = createKeyset({
     en: 'Genshin Impact Pop! Aether (#160)',
     ru: 'Genshin Impact Pop! Aether (#160)',
   },
+  'Taito Lycoris Recoil Desktop Cute Figure - Takina Inoue (Roomwear Ver.)': {
+    en: 'Taito Lycoris Recoil Desktop Cute Figure - Takina Inoue (Roomwear Ver.)',
+    ru: 'Taito Lycoris Recoil Desktop Cute Figure - Takina Inoue (Roomwear Ver.)',
+  },
+  'Taito Lycoris Recoil Aqua Desktop Cute Figure - Chisato Nishikigi (Roomwear Ver.)': {
+    en: 'Taito Lycoris Recoil Aqua Desktop Cute Figure - Chisato Nishikigi (Roomwear Ver.)',
+    ru: 'Taito Lycoris Recoil Aqua Desktop Cute Figure - Chisato Nishikigi (Roomwear Ver.)',
+  },
+  'Qset+ Persona 5 The Royal P5R Protagonist Ren Amamiya 80mm Figure': {
+    en: 'Qset+ Persona 5 The Royal P5R Protagonist Ren Amamiya 80mm Figure',
+    ru: 'Qset+ Persona 5 The Royal P5R Protagonist Ren Amamiya 80mm Figure',
+  },
   'LEGO Sets': {
     en: 'LEGO Sets',
     ru: 'Наборы LEGO',

services/www/src/app/wanted/index.tsx

@@ -79,7 +79,12 @@ function WantedPage(): React.JSX.Element {
                 value: 'owned',
                 label: t('Already Owned'),
                 labelIcon: <Check size={18} />,
-                items: [t('Genshin Impact Pop! Aether (#160)')],
+                items: [
+                  t('Genshin Impact Pop! Aether (#160)'),
+                  t('Taito Lycoris Recoil Desktop Cute Figure - Takina Inoue (Roomwear Ver.)'),
+                  t('Taito Lycoris Recoil Aqua Desktop Cute Figure - Chisato Nishikigi (Roomwear Ver.)'),
+                  t('Qset+ Persona 5 The Royal P5R Protagonist Ren Amamiya 80mm Figure'),
+                ],
               },
             ]}
             title={t('Figurines')}

services/www/src/components/Layout/DefaultLayout/DefaultLayout.tsx

@@ -69,7 +69,7 @@ export function DefaultLayout({
         caption={description}
         heading={title ?? ''}
         metadata={headerAddonLeft}
-        strategy={title ? 'collapsible-sticky' : 'always-collapsed-fixed'}
+        strategy={title ? 'collapsible-sticky' : 'always-collapsed-sticky'}
       />
       <PageContainer
         as="main"