Skip to content

style: improve navbar spacing and reduce search bar width #949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hk2166 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

style: improve navbar spacing and reduce search bar width #949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b40b576
style: improve navbar spacing and reduce search bar width
hk2166 Feb 24, 2026
f17aa80
Create .env.example
hk2166 Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .env.sample → .env.example
View file
Open in desktop
File renamed without changes.
18 changes: 9 additions & 9 deletions web/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,9 @@
<i class="fas fa-bars text-xl"></i>
</button>
<!-- Nav and additional actions -->
<nav class="hidden md:flex items-center space-x-3">
<nav class="hidden md:flex items-center space-x-6">
<!-- Main navigation links with dropdowns -->
<div class="flex space-x-2 items-center">
<div class="flex space-x-4 items-center">
<!-- LEARN Dropdown -->
<div class="relative group">
<button class="flex items-center space-x-1 text-white hover:text-teal-100 focus:outline-none py-2">
Expand Down Expand Up @@ -342,14 +342,14 @@
</div>
</div>
<!-- Search bar (persistent element) -->
<div class="relative hidden lg:inline-block w-[250px]">
<div class="relative hidden lg:inline-block w-[180px]">
<form action="{% url 'course_search' %}" method="get" class="m-0">
<input type="text"
name="q"
placeholder="What do you want to learn?"
class="rounded-full w-[250px] bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
placeholder="Search..."
class="rounded-full w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-300 dark:focus:ring-teal-700" />
<button type="submit"
class="absolute right-3 top-2 text-gray-500 dark:text-gray-300">
class="absolute right-3 top-1 text-gray-500 dark:text-gray-300">
Comment on lines +350 to +352
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Undocumented change. The search button position was adjusted from top-2 to top-1, and the input received a text-sm class. While these changes make sense for the reduced search bar width and improved centering, they were not mentioned in the PR description. The PR description should document all visual changes for complete transparency.

Copilot uses AI. Check for mistakes.
<i class="fas fa-search"></i>
</button>
</form>
Comment on lines +345 to 355
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Search button may be visually misaligned after top-2 → top-1 change.

With py-1.5 on the input (~26px total height), top-1 (4px) positions the search icon above the vertical center. The previous top-2 (8px) was closer to center for this input height. Consider keeping top-2 or switching to a flex-based centering approach:

🎨 Proposed fix for button alignment 
-<button type="submit"
-        class="absolute right-3 top-1 text-gray-500 dark:text-gray-300">
+<button type="submit"
+        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-300">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/templates/base.html` around lines 345 - 355, The search button (the
button element inside the form with classes "absolute right-3 top-1") is
vertically misaligned because the input uses py-1.5; change the positioning to
restore vertical centering by replacing "top-1" with "top-2" on the button, or
convert the form layout to a flex container (make the form a flex row,
align-items center, remove absolute positioning on the button) so the input and
the button are vertically centered; update the button class reference ("absolute
right-3 top-1") and/or the form element to implement the chosen fix.

Expand All @@ -360,7 +360,7 @@
class="flex items-center p-2 hover:bg-teal-700 rounded-lg">
<i class="fas fa-comments text-xl"></i>
</a> <!-- Language and Dark Mode -->
<div class="flex items-center space-x-2">
<div class="flex items-center space-x-4">
<!-- Cart Icon -->
<a href="{% url 'cart_view' %}"
class="relative hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
Expand Down Expand Up @@ -518,7 +518,7 @@
<div class="flex items-center space-x-2">
<a href="{% url 'account_login' %}"
class="hover:underline flex items-center p-2 hover:bg-teal-700 rounded-lg">
<i class="fa-solid fa-right-to-bracket mr-1"></i>
<i class="fa-solid fa-right-to-bracket mr-(-1)"></i>
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Invalid Tailwind CSS class syntax. The class mr-(-1) is not valid Tailwind CSS. Tailwind uses negative margins with the format -mr-{size} (e.g., -mr-1, -mr-2), not mr-(-1). If you intended to use a negative right margin of 0.25rem, use -mr-1. If you intended to remove the margin entirely, use mr-0 or remove the class altogether.

Suggested change
<i class="fa-solid fa-right-to-bracket mr-(-1)"></i>
<i class="fa-solid fa-right-to-bracket mr-2"></i>

Copilot uses AI. Check for mistakes.
<span class="hidden sm:inline">Login</span>
Comment on lines +521 to 522
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's check if the file exists and examine the relevant lines
file="web/templates/base.html"
if [ -f "$file" ]; then
  echo "=== Lines 515-530 of $file ==="
  sed -n '515,530p' "$file" | cat -n
else
  echo "File not found. Let's search for it."
  find . -name "base.html" -type f
fi

Repository: alphaonelabs/alphaonelabs-education-website

Length of output: 1010

🏁 Script executed:

# Also check for any Tailwind configuration that might define custom utilities
find . -name "tailwind.config.*" -o -name "tailwind.json" -o -name ".tailwindrc*"

Repository: alphaonelabs/alphaonelabs-education-website

Length of output: 69

🏁 Script executed:

# Search the codebase for mentions of mr-(-1) to see if it's used elsewhere
rg "mr-\(\-[0-9]\)" --type html

Repository: alphaonelabs/alphaonelabs-education-website

Length of output: 179

🏁 Script executed:

# Check for CSS files and any definitions of mr-(-1)
find . -name "*.css" -type f | head -20

Repository: alphaonelabs/alphaonelabs-education-website

Length of output: 154

🏁 Script executed:

# Search for any CSS that might define mr-(-1)
rg "mr-\(\-" --type css

Repository: alphaonelabs/alphaonelabs-education-website

Length of output: 69

🌐 Web query:

Tailwind CSS negative margin syntax validation

💡 Result:

In Tailwind CSS, negative margin utilities are valid when you prefix the entire margin class with a leading dash (-):

  • Scale-based negatives: -m-4, -mx-2, -mt-8, -mb-px (pattern: -m{side?}-{size} / -m-<number> / -m-px) [1]
  • Custom/arbitrary values: m-[5px] is valid for custom margins, and negatives follow the same rule by prefixing with -, e.g. -m-[5px] / -mt-[12px] [1]

Common invalid forms:

  • m--4 / mt--8 (double dash in the middle) — use -m-4 / -mt-8 instead [1]

Source: Tailwind CSS “margin” documentation (negative values + custom values) [1].

References
[1] Tailwind CSS Docs — Margin: https://tailwindcss.com/docs/margin

mr-(-1) is not a valid Tailwind CSS class — remove and use correct negative margin syntax.

Tailwind requires a leading-dash prefix for negative values (-mr-1), not parenthesis syntax (mr-(-1)). The class mr-(-1) generates no CSS, leaving the icon with zero right margin instead of the intended spacing. This violates the guideline: "Use Tailwind CSS classes only in templates."

On sm+ breakpoints where the "Login" text displays inline, the icon and label will sit flush without the intended gap adjustment.

Fix 
-<i class="fa-solid fa-right-to-bracket mr-(-1)"></i>
+<i class="fa-solid fa-right-to-bracket -mr-1"></i>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<i class="fa-solid fa-right-to-bracket mr-(-1)"></i>
<span class="hidden sm:inline">Login</span>
<i class="fa-solid fa-right-to-bracket -mr-1"></i>
<span class="hidden sm:inline">Login</span>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/templates/base.html` around lines 521 - 522, Replace the invalid Tailwind
class mr-(-1) on the icon element with the correct negative-margin syntax -mr-1;
locate the <i> element using the class string "fa-solid fa-right-to-bracket
mr-(-1)" and update its class list to use -mr-1 so the icon has the intended
right spacing from the "Login" <span> on sm+ breakpoints.

</a>
<a href="{% url 'account_signup' %}"
Expand Down Expand Up @@ -556,7 +556,7 @@
<!-- Mobile Navigation Menu with Accordions -->
<div class="space-y-4">
<!-- LEARN Section -->
<div class="border-b border-gray-200 dark:border-gray-700 pb-4">
<div class="border-b border-gray-200 dark:border-gray-700 pb-6">
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor discrepancy with PR scope. This change increases mobile navigation section padding (pb-4 → pb-6), but the PR description focuses exclusively on desktop navbar spacing improvements. While this change is positive for consistency, it extends beyond the stated scope of the PR which only mentions changes to "navigation bar" spacing, typically referring to the desktop header navbar.

Copilot uses AI. Check for mistakes.
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Inconsistent bottom padding in mobile accordion sections.

Only the LEARN section was updated to pb-6 (Line 559); the COMMUNITY (Line 615), RESOURCES (Line 676), and ABOUT (Line 719) sections remain at pb-4. This creates uneven spacing between accordion items in the mobile menu. Either update all sections consistently or revert LEARN to pb-4.

🎨 Proposed fix — align all mobile accordion sections 
-<div class="border-b border-gray-200 dark:border-gray-700 pb-6">  <!-- LEARN -->
+<div class="border-b border-gray-200 dark:border-gray-700 pb-4">  <!-- LEARN -->

Or apply pb-6 to COMMUNITY, RESOURCES, and ABOUT as well:

 <!-- COMMUNITY Section -->
-<div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+<div class="border-b border-gray-200 dark:border-gray-700 pb-6">
 <!-- RESOURCES Section -->
-<div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+<div class="border-b border-gray-200 dark:border-gray-700 pb-6">
 <!-- ABOUT Section -->
-<div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+<div class="border-b border-gray-200 dark:border-gray-700 pb-6">

As per coding guidelines: "Use consistent spacing with gap-{size} and space-{y|x}-{size} Tailwind classes."

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="border-b border-gray-200 dark:border-gray-700 pb-6">
<div class="border-b border-gray-200 dark:border-gray-700 pb-4">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/templates/base.html` at line 559, The mobile accordion spacing is
inconsistent: the LEARN section uses class "pb-6" while COMMUNITY, RESOURCES,
and ABOUT still use "pb-4"; update the other accordion container divs that
currently have "pb-4" (the COMMUNITY, RESOURCES, and ABOUT section divs) to use
"pb-6" so all mobile sections match, or alternatively change the LEARN div's
"pb-6" back to "pb-4" to keep the original spacing—ensure all accordion
container divs use the same "pb-4" or "pb-6" Tailwind padding class for
consistency.

<div class="flex items-center justify-between py-2 cursor-pointer"
onclick="toggleAccordion('learn-accordion')">
<span class="text-gray-800 dark:text-gray-200 font-semibold">LEARN</span>
Expand Down