[Intermediate]: Align profile section in the TSC

[exploreriii]

🧩 Intermediate Contributors

This issue is intended for contributors who are quite familiar with the
Hiero Website.

You should feel comfortable with:

• Netlify previews and tests
• The Hiero website repository structure

If this is your very first contribution to the project, we recommend starting with a few
Good First Issues before working on this one.

🐞 Problem Description

We have buttons to expand each person's profile at
https://hiero.org/tsc

the buttons look the same but are always placed differently

The issue is possibly the buttons are just stacked below the text, inside the profile window.

💡 Expected Solution

Maybe a solution is to create a sub container inside the window to create consistent styling

• Photo
• Github id
• Text summary
• Read full profile button

The priority is to solve the profile button alignment, but a developer can also improve the handling for the others if they want to try.

🧠 Implementation Notes

Add implementation notes here.

✅ Acceptance Criteria

To merge this issue, the pull request must:

• Fully address the problem described above
• Follow existing project conventions and patterns
• Include tests or example updates where appropriate
• Pass all CI checks
• Include a valid changelog entry
• Use DCO and GPG-signed commits

📚 Additional Context or Resources

• Website Developer Docs

[exploreriii]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Apply the existing flex-column card pattern from the Governance Resources section to the TSC member cards
• Use flex flex-col on the article, flex flex-1 flex-col on the content wrapper, and grow on the bio paragraph to push buttons to card bottoms
• No new components or abstractions needed—this is a targeted Tailwind class update to one file
• Visual verification via Netlify preview is the appropriate validation method for this CSS-only change

Implementation Steps

Fix Profile Button Alignment

Apply the existing flex-column card pattern (already used in the Governance Resources section of the same file) to the TSC member cards. This ensures the "Read full profile" button is consistently positioned at the bottom of each card regardless of bio text length.

Task 1: Apply Flex Column Layout to Member Cards

Update the member card structure in src/app/tsc/page.tsx to use flex column layout for consistent button positioning.

• Update the <article> element (line 180) to include flex flex-col in its className, making it a flex container with vertical stacking
• Update the content wrapper <div> (line 197) to include flex flex-1 flex-col in its className, allowing it to expand and become a nested flex container
• Update the bio preview <p> element (line 217) to include grow in its className, causing it to expand and push the button to the bottom of the card

The changes follow the identical pattern already established in the Governance Resources cards (lines 261+) within the same file, which use flex h-full flex-col on the card container and grow on the description to pin the action link at the bottom.

Task 2: Add Changelog Entry

Document the fix in the project changelog.

• Add a changelog entry describing the TSC page profile button alignment fix
• Follow the existing changelog format and conventions in the repository

🤖 Prompt for AI agents

This phase fixes the inconsistent vertical positioning of the "Read full
profile" buttons on the TSC page (`src/app/tsc/page.tsx`) by applying the
existing flex-column card pattern from the Governance Resources section to the
TSC member cards.

- In `src/app/tsc/page.tsx`, make the following Tailwind class updates:
  - `<article>` element (line 180): add `flex flex-col` to its `className`
- Content wrapper `<div>` (line 197): add `flex flex-1 flex-col` to its
`className`
  - Bio preview `<p>` element (line 217): add `grow` to its `className`
- These changes mirror the identical pattern already used in the Governance
Resources cards (lines 261+), which use `flex h-full flex-col` on the card
container and `grow` on the description to pin the action link at the bottom
- After updating the component, add a changelog entry describing the TSC page
profile button alignment fix, following the existing changelog format and
conventions in the repository

Research

The TSC page is a self-contained client component at src/app/tsc/page.tsx that renders member profile cards in a responsive CSS grid. Each member card is an inline <article> element containing a photo, name, GitHub link, truncated bio preview, and a conditional "Read full profile" button. The same file already implements a working flex-column pattern for the Governance Resources section that pins links to the bottom of cards using flex flex-col on the container and grow on the description paragraph. No tests exist for the TSC page.

---

🚀 Next Steps

🤖 All AI agent prompts combined

This phase fixes the inconsistent vertical positioning of the "Read full
profile" buttons on the TSC page (`src/app/tsc/page.tsx`) by applying the
existing flex-column card pattern from the Governance Resources section to the
TSC member cards.

- In `src/app/tsc/page.tsx`, make the following Tailwind class updates:
  - `<article>` element (line 180): add `flex flex-col` to its `className`
- Content wrapper `<div>` (line 197): add `flex flex-1 flex-col` to its
`className`
  - Bio preview `<p>` element (line 217): add `grow` to its `className`
- These changes mirror the identical pattern already used in the Governance
Resources cards (lines 261+), which use `flex h-full flex-col` on the card
container and `grow` on the description to pin the action link at the bottom
- After updating the component, add a changelog entry describing the TSC page
profile button alignment fix, following the existing changelog format and
conventions in the repository

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[aashu2006]

@exploreriii can i work on this?