Remove unordered list from Marquee & ensure we have no empty rows (#2035)

Author: hasparus

.changeset/giant-berries-draw.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Remove unordered list from Marquee & ensure we have no empty rows

packages/components/src/components/marquee/index.tsx

@@ -45,9 +45,9 @@ export function Marquee({
       )}
       {...rest}
     >
-      <ul
+      <div
         className={cn(
-          'flex w-max animate-[marquee_var(--animation-duration)_var(--animation-direction)_linear_infinite] gap-2 py-1',
+          'flex w-max animate-[marquee_var(--animation-duration)_var(--animation-direction)_linear_infinite] gap-1 py-0.5 sm:gap-2 sm:py-1',
         )}
         style={
           {
@@ -75,7 +75,7 @@ export function Marquee({
       >
         {children}
         {children}
-      </ul>
+      </div>
       <style href="Marquee-keyframes">
         {
           /* css */ `
@@ -106,11 +106,15 @@ export function MarqueeRows({
   className,
   ...rest
 }: MarqueeRowsProps) {
-  const chunkSize = Math.ceil(children.length / rows);
+  const chunkSize = Math.floor(children.length / rows);
+  const remainder = children.length % rows;
   const chunks: ReactElement[][] = [];
 
+  let start = 0;
   for (let i = 0; i < rows; i++) {
-    chunks.push(children.slice(i * chunkSize, (i + 1) * chunkSize));
+    const end = start + chunkSize + (i < remainder ? 1 : 0); // distribute extras
+    chunks.push(children.slice(start, end));
+    start = end;
   }
 
   return (

packages/components/src/components/marquee/marquee.stories.tsx

@@ -3,7 +3,7 @@ import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorat
 import { Marquee, MarqueeProps, MarqueeRows, MarqueeRowsProps } from './index';
 
 export default {
-  title: 'Marquee',
+  title: 'Components/Marquee',
   component: Marquee,
   decorators: [hiveThemeDecorator],
   parameters: {
@@ -242,7 +242,7 @@ export const EnvelopPlugins: StoryObj<MarqueeRowsProps> = {
         href={plugin.href}
         target="_blank"
         rel="noreferrer"
-        className="hive-focus rounded-lg bg-green-900 px-4 py-3 text-green-600 transition hover:bg-green-800 hover:text-white"
+        className="hive-focus rounded bg-green-900 px-2 py-1.5 text-[10px] text-green-600 transition hover:bg-green-800 hover:text-white sm:rounded-lg sm:px-4 sm:py-3 sm:text-sm"
       >
         {plugin.title}
       </a>