fix(login): fill video panel and drop panel background

[anuj-kumary]

1. LoginCarousel.tsx — removed object-cover from the video element. It was cropping the video's top/bottom on wider screens (the "AI Studio" / header area got cut). The video now fills the panel via h-full w-full.
2. carousel-layout.less — removed the blue gradient background on .form-carousel-container so only the video shows behind it.

Greptile Summary

The PR adjusts the login carousel so the complete video remains visible and removes the panel’s gradient background.

• Removes object-cover from the login video.
• Removes the carousel container’s blue gradient.
• Applies the primary background token to the surrounding layout.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
openmetadata-ui/src/main/resources/ui/src/components/Layout/CarouselLayout/CarouselLayout.tsx	Adds the primary background utility to the login layout.
openmetadata-ui/src/main/resources/ui/src/components/Layout/CarouselLayout/carousel-layout.less	Removes the carousel panel’s gradient background.
openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx	Removes cover-based video cropping so the complete video remains visible.

_{Reviews (4): Last reviewed commit: "Merge branch 'main' into fix/login-video..." | Re-trigger Greptile}

[github-actions]

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

• No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically.

Maintainers can bypass this check by adding the skip-pr-checks label.

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	66.93% (80187/119796)	51.31% (48993/95480)	52.33% (14655/28004)

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[github-actions]

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[gitar-bot]

Code Review ⚠️ Changes requested 0 resolved / 1 findings

Updates the login carousel styles to prevent video cropping and remove the panel gradient, but introduces an accessibility issue by removing the prefers-reduced-motion check for the autoplaying video.

⚠️ Quality: Login video no longer respects prefers-reduced-motion

📄 openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx:24-33

The previous implementation gated autoPlay and loop on a prefers-reduced-motion: reduce media query so motion-sensitive users didn't get an autoplaying, looping background video. This commit hardcodes autoPlay and loop, removing that accessibility safeguard. Restore the reduced-motion check and conditionally disable autoplay/loop when the user prefers reduced motion.

Re-introduce the prefers-reduced-motion guard around autoPlay/loop.

const prefersReducedMotion =
  typeof window !== 'undefined' &&
  Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches);

return (
  <video
    aria-hidden
    muted
    playsInline
    autoPlay={!prefersReducedMotion}
    className="tw:absolute tw:inset-0 tw:h-full tw:w-full"
    data-testid="login-video"
    loop={!prefersReducedMotion}
    src={loginVideo}
  />
);

🤖 Prompt for agents

Code Review: Updates the login carousel styles to prevent video cropping and remove the panel gradient, but introduces an accessibility issue by removing the prefers-reduced-motion check for the autoplaying video.

1. ⚠️ Quality: Login video no longer respects prefers-reduced-motion
   Files: openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx:24-33

   The previous implementation gated `autoPlay` and `loop` on a `prefers-reduced-motion: reduce` media query so motion-sensitive users didn't get an autoplaying, looping background video. This commit hardcodes `autoPlay` and `loop`, removing that accessibility safeguard. Restore the reduced-motion check and conditionally disable autoplay/loop when the user prefers reduced motion.

   Fix (Re-introduce the prefers-reduced-motion guard around autoPlay/loop.):
   const prefersReducedMotion =
     typeof window !== 'undefined' &&
     Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches);
   
   return (
     <video
       aria-hidden
       muted
       playsInline
       autoPlay={!prefersReducedMotion}
       className="tw:absolute tw:inset-0 tw:h-full tw:w-full"
       data-testid="login-video"
       loop={!prefersReducedMotion}
       src={loginVideo}
     />
   );

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source}