❓ Help: Layout break

[HighError]

When I add Glow and an element that scrolls horizontally the layout breaks

Code:

FeatureCard

export default function FeatureCard({ className }: IProps) {
  return (
    <Glow>
      <div
        className={twMerge(
          'space-y-6 rounded-md border-2 border-border p-8 glow:bg-primary/15 glow:border-primary',
          className
        )}
      >
        <div className='aspect-[4/3] overflow-hidden rounded-md'>
          <Image src='/demo.jpg' className='aspect-[4/3] w-full object-center' width={360} height={270} alt='' />
        </div>
        <div>
          <h3 className='text-lg font-semibold'>Seaside Serenity Villa</h3>
          <p className='text-muted-foreground'>
            A stunning 4-bedroom, 3-bathroom villa in a peaceful suburban neighborhood
          </p>
        </div>
        <HorizontalScrollPanel className='flex flex-row gap-2'>
          <Tag />
          <Tag />
          <Tag />
          <Tag />
          <Tag />
          <Tag />
          <Tag />
          <Tag />
        </HorizontalScrollPanel>
        <div className='flex flex-row items-center justify-between gap-2'>
          <div>
            <p className='text-muted-foreground'>Ціна</p>
            <p className='text-xl font-semibold'>$500,000</p>
          </div>
          <Button>Детальніше</Button>
        </div>
      </div>
    </Glow>
  );
}

Features

<GlowCapture className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3'>
        <FeatureCard />
        <FeatureCard />
        <FeatureCard />
        <FeatureCard className='hidden sm:block lg:hidden' />
</GlowCapture>

HorizontalScrollPanel

'use client';

import React, { useEffect, useRef, useState } from 'react';
import { useScroll } from 'react-use';
import { twMerge } from 'tailwind-merge';

interface IProps {
  children?: React.ReactNode;
  className?: string;
}

export default function HorizontalScrollPanel({ children, className }: IProps) {
  const ref = useRef<HTMLDivElement | null>(null);
  const { x: xScroll } = useScroll(ref);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const el = ref.current;

    if (el) {
      const onWheel = (e: WheelEvent) => {
        if (e.deltaY === 0) return;
        e.preventDefault();
        el.scrollTo({
          left: el.scrollLeft + e.deltaY,
          behavior: 'smooth',
        });
      };
      el.addEventListener('wheel', onWheel);
      setWidth(el.scrollWidth - el.offsetWidth);
    }
  }, []);
  return (
    <div className='relative'>
      <div
        className={twMerge(
          'absolute inset-y-0 -left-1 w-12 bg-gradient-to-r from-black to-black/0 shadow-xl duration-300 transition-all pointer-events-none',
          xScroll > 10 ? 'opacity-100' : 'opacity-0'
        )}
      />
      <div
        className={twMerge(
          'absolute inset-y-0 -right-1 w-12 bg-gradient-to-r to-black from-black/0 shadow-xl duration-300 transition-all pointer-events-none',
          xScroll + 10 < width ? 'opacity-100' : 'opacity-0'
        )}
      />
      <div ref={ref} className={twMerge('overflow-x-auto overflow-y-hidden scrollbar-none', className)}>
        {children}
      </div>
    </div>
  );
}

Layouts

Only with glow or only with HorizontalScrollPanel

With glow and HorizontalScrollPanel

[Mordechai Meisels]

Is the glow capture inside the scroll panel or outside?

[HighError]

Outside

[HighError]

GlowCapture -> array of Glow components -> every Glow has HorizontalScrollPanel

[Mordechai Meisels]

It's hard to judge without a working reproduction, but it might be related to absolute positioning.

If you could create a reproduction I'd be in a better position to help.

[HighError]

This is really because of the absolute positioning.

Sorry for the long answer.
It's not a problem for me anymore since I ditched the tags and now everything works as it should.

I don't think it can be done in this context, because even if you fix the absolute positioning problem, the mask will not display the tag line correctly, since it is dynamic.