Fix Educational Videos Section Responsive Layout

[Ananya44444]

Fixes #823

Description

Fixed alignment and responsiveness issues in the Educational Videos section on the home page. The section now properly stacks and aligns on mobile/tablet screens.

Changes Made

• Alignment Fix: Header title, video count, and description now start from the same left edge
• Mobile Responsiveness: Form inputs and buttons stack vertically on screens < md breakpoint (768px)
• Container Fit: All elements now fit within the card container without overflow
• Dark Mode: Preserved all existing dark mode variants

Testing

• ✅ Responsive design tested at all viewports
• ✅ All 224 Django tests pass
• ✅ Pre-commit hooks pass: trailing-whitespace, end-of-file-fixer, black, isort, djlint, flake8
• ✅ Dark mode functionality preserved
• ✅ No breaking changes to existing functionality

Files Changed

• web/templates/index.html - Educational Videos section (lines 681-740)

Checklist

• Did you run the pre-commit? (If not, your PR will most likely not pass — please ensure it passes pre-commit)
• Did you test the change? (Ensure you didn’t just prompt the AI and blindly commit — test the code and confirm it works)
• Added screenshots to the PR description (if applicable)

Recording.2026-01-30.143938.mp4

Summary by CodeRabbit

• Style
  • Improved responsive design with better mobile-friendly layouts across the interface
  • Enhanced alignment and spacing of form elements, buttons, and controls
  • Optimized layout for videos section with refined typography and visual hierarchy
  • Better organization of upload and browse actions for improved usability on all screen sizes

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The pull request addresses responsive layout issues in the Educational Videos section by restructuring HTML elements and applying responsive Tailwind CSS classes to prevent button overflow and fix misalignment on smaller screens.

Changes

Cohort / File(s)

Summary

Educational Videos Template Layout web/templates/index.html

Responsive design fixes including: reflow of header with flex-col layout, metadata line adjustments (text-xs sm:text-sm), description text alignment from center to left, Quick Add form reconfiguration from horizontal to responsive flex layout (col on mobile, row on larger screens), category and submit controls repositioning with responsive width classes, action button group conversion to full-width on small viewports, and template block tag updates (endblock → endblock extra_js).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Login mandatory removed for Educational Video Upload and 400 error on video upload resolved #574: Modifies the same quick-add educational video form and inline JavaScript in web/templates/index.html, sharing overlapping layout and responsive class changes.

Suggested reviewers

• A1L13N

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing responsive layout issues in the Educational Videos section, which aligns with the core objective of the PR.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #823: buttons no longer overflow, header/count/description are left-aligned, and form inputs/buttons stack responsively on small screens.
Out of Scope Changes check	✅ Passed	All changes are within scope and directly address the responsive layout issues. The template modifications focus exclusively on the Educational Videos section styling and layout without introducing unrelated functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR refines the Educational Videos section layout on the home page to fix alignment and responsiveness issues noted in Issue #823, while preserving dark mode behavior and existing JS functionality.

Changes:

• Reworked the Educational Videos header structure so the icon, title, and video count align along a consistent left edge and scale better across viewports.
• Adjusted the quick-add form and action buttons to use responsive flex utilities (flex-col sm:flex-row, w-full sm:w-auto, min-w-0) so inputs and buttons stack vertically on small screens and no longer overflow their container.
• Updated the extra_js block closing tag in index.html to use a named {% endblock extra_js %} for consistency with other templates.