fix: [M3-8533] - Broken firewall rules table

[pmakode-akamai]

Description 📝

The table/list header row in the firewall rules table is not the correct color in dark/light mode. It is hard to tell that it is intended to be a table/list header.

Changes 🔄

• Changed the Firewall rules table to match our normal tables.
  • Updated the styles to match our normal table colors.
• Updated PolicyRow
  • Changed it to have borders on all sides.
  • Changed the alignment of the Select and helper text to be aligned with the Action column for screens < lg, and with the last column for screens >= lg.

Target release date 🗓️

N/A

Preview 📷

Breakpoints	Before	After
lg
between sm and lg
sm

How to test 🧪

Reproduction steps

(How to reproduce the issue, if applicable)

• Go to any Firewall details page (https://cloud.linode.com/firewalls/948204/rules)
• Observe the broken looking table (in both dark and light mode)

Verification steps

• Ensure the table is not broken in both dark and light modes.
• Verify table across different screen sizes and ensure it matches our normal table colors.

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 87.06%
Current Coverage: 87.06%

[hkhalil-akamai]

Can we update the padding of the cells to match our other tables? They have 15px left and right. Header cells have an additional 10px top and bottom.

Other tables	FirewallRuleTable
Header cells
Body cells

[pmakode-akamai]

Good catch! 👍 I will update it.

edit: Done ✅

[bnussman-akamai]

Looks much better!

[abailly-akamai]

Such styling discrepancy usually points at markup or composition problems.

In this case, the <FirewallRuleTable > is very much a misnomer considering it renders div grid in place an actual HTML table. I am not why it was built that way (perhaps to account for the draggable aspect of its rows?) but I'd like explore implementing the right semantic markup instead of putting a styling band-aid. There would benefits doing so, namely consistency with our other features, styling and accessibility, as well as making sure this will update when we update any table related styling.

It increases the scope fo this particular PR, but worth exploring.

[pmakode-akamai]

Such styling discrepancy usually points at markup or composition problems.

In this case, the <FirewallRuleTable > is very much a misnomer considering it renders div grid in place an actual HTML table. I am not why it was built that way (perhaps to account for the draggable aspect of its rows?) but I'd like explore implementing the right semantic markup instead of putting a styling band-aid. There would benefits doing so, namely consistency with our other features, styling and accessibility, as well as making sure this will update when we update any table related styling.

It increases the scope for this particular PR, but worth exploring.

I agree that moving to more semantic markup for the <FirewallRuleTable > would enhance accessibility and consistency. However, I believe this change is beyond the scope of the current PR/ticket.

I suggest we have a separate ticket to explore this implementation in detail. This way, we can ensure it receives the attention it deserves without delaying the current changes. Let me know what you think about this.

[pmakode-akamai]

@abailly-akamai I’ll explore this further and see how we can approach it effectively. Thanks!