edit footer in Contact Us page - #14
WatthanakornR wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements a sticky footer for the Contact Us page by modifying the root layout to use flexbox layout and enhancing the Contact page with responsive design improvements.
- Added flexbox layout classes to the root
<body>element withflex min-h-screen flex-col - Applied
flex-1class to the<main>element to push footer to bottom - Refactored Contact page with responsive typography and improved spacing using Tailwind breakpoints
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| app/layout.tsx | Added flexbox layout classes to body and main elements to create sticky footer pattern |
| app/contact/page.tsx | Enhanced responsive design with breakpoint-specific typography, improved spacing, and restructured layout |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {/* CDC Section */} | ||
| <div className="flex flex-col gap-4 sm:gap-5"> | ||
| <div className="flex flex-col gap-3"> | ||
| <h2 className="body-th-3 font-bold text-[#102E50] text-base sm:text-lg md:text-xl"> |
There was a problem hiding this comment.
The body-th-3 class is being overridden by responsive text size utilities (text-base sm:text-lg md:text-xl). According to globals.css, body-th-3 sets font-size: 12px and line-height: 16px, which conflicts with the responsive sizing. Consider removing body-th-3 or creating a dedicated class that doesn't include conflicting font-size values.
| <h2 className="body-th-3 font-bold text-[#102E50] text-base sm:text-lg md:text-xl"> | ||
| ศูนย์พัฒนาสมรรถนะและความพร้อมทางอาชีพ (CDC) | ||
| </h2> | ||
| <p className="body-th-3 font-bold text-[#102E50] text-sm sm:text-base md:text-lg"> |
There was a problem hiding this comment.
The body-th-3 class is being overridden by responsive text size utilities (text-sm sm:text-base md:text-lg). According to globals.css, body-th-3 sets font-size: 12px and line-height: 16px, which conflicts with the responsive sizing. Consider removing body-th-3 or creating a dedicated class that doesn't include conflicting font-size values.
| <Phone width={18} height={18} className="shrink-0 text-[#102E50]" /> | ||
| <a | ||
| href="tel:02-218-6349" | ||
| className="body-th-3 text-sm text-[#102E50] hover:opacity-80 sm:text-base md:text-lg" |
There was a problem hiding this comment.
The body-th-3 class is being overridden by responsive text size utilities (text-sm sm:text-base md:text-lg). According to globals.css, body-th-3 sets font-size: 12px and line-height: 16px, which conflicts with the responsive sizing. Consider removing body-th-3 or creating a dedicated class that doesn't include conflicting font-size values.
| <Mail width={18} height={18} className="shrink-0 text-[#102E50]" /> | ||
| <a | ||
| href="mailto:cdc@eng.chula.ac.th" | ||
| className="body-th-3 text-sm text-[#102E50] hover:opacity-80 sm:text-base md:text-lg" |
There was a problem hiding this comment.
The body-th-3 class is being overridden by responsive text size utilities (text-sm sm:text-base md:text-lg). According to globals.css, body-th-3 sets font-size: 12px and line-height: 16px, which conflicts with the responsive sizing. Consider removing body-th-3 or creating a dedicated class that doesn't include conflicting font-size values.
| {/* Academic Affairs Section */} | ||
| <div className="flex flex-col gap-4 sm:gap-5"> | ||
| <div className="flex flex-col gap-3"> | ||
| <h2 className="body-th-3 font-bold text-[#102E50] text-base sm:text-lg md:text-xl"> |
There was a problem hiding this comment.
The body-th-3 class is being overridden by responsive text size utilities (text-base sm:text-lg md:text-xl). According to globals.css, body-th-3 sets font-size: 12px and line-height: 16px, which conflicts with the responsive sizing. Consider removing body-th-3 or creating a dedicated class that doesn't include conflicting font-size values.
| href="https://www.instagram.com/academic.esc" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="body-th-3 text-sm text-[#102E50] hover:opacity-80 sm:text-base md:text-lg" |
There was a problem hiding this comment.
The body-th-3 class is being overridden by responsive text size utilities (text-sm sm:text-base md:text-lg). According to globals.css, body-th-3 sets font-size: 12px and line-height: 16px, which conflicts with the responsive sizing. Consider removing body-th-3 or creating a dedicated class that doesn't include conflicting font-size values.
edit footer in contact us page to bottom