🐛 Tiago's feedback

[PothieuG]

Requested by: @Aibono1225 via Email Feedback Collection 📧
cc: @Marxoz @SSWRules @tiagov8

Hi Team!

Pain

Multiple styling, functionality and UX issues have been identified on the SSW Rules staging site through user feedback. These issues affect readability, navigation, and overall user experience compared to the current production site.

See comments for full context.

Acceptance Criteria

Content & Typography:

1. All paragraphs have proper margin-bottom: 1rem spacing
2. All list items have margin-bottom: .75rem spacing
3. Ordered lists under lists display correctly (no bullet points)
4. Lists inside boxes show single bullet points (no overlap)
5. Table styling in content is properly formatted

Media & Links:
6. All embedded videos function correctly
7. All anchor links to headings (H2-H4) work with hover functionality
8. SSW Rules logo links to correct homepage
9. All red colors match brand guidelines

Navigation & Layout:
10. Header is properly aligned with content (per Figma)
11. Category sidebar uses simplified naming (without "Rules to Better")
12. "Items per page" dropdown functions correctly when scrolling
13. Three-line elements are properly aligned using CSS flex

Error Handling:
14. 404 page includes "404" text
15. 404 page has proper spacing below "Take me home" button
16. 404 page uses current site text content
17. 404 page includes link to error page best practices

Issues to Address

🎨 Styling Issues:

• Paragraph and list spacing inconsistencies
• Incorrect red color usage
• Misaligned elements on category pages
• Table formatting problems
• Header alignment with content

🔧 Functionality Issues:

• Broken video embeds
• Missing heading anchor links
• Dropdown behavior when scrolling
• Broken logo navigation

📝 Content Issues:

• List formatting bugs (bullets vs numbers)
• Category naming inconsistencies
• 404 page improvements

🔗 Reference Links:

• [Current site example](https://www.ssw.com.au/rules/the-value-of-consistency/)
• [Staging site](https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/)
• [Related GitHub Issue](♻️ SSW.Rules CSS - List bullet points are generated in a inadequate way #1616)
• [404 Best Practices Rule](https://www.ssw.com.au/rules/404-useful-error-page)

Test Pages

1. Homepage: /
2. Category page: /rules-to-better-ai-development
3. Individual rule: /the-value-of-consistency
4. Technical docs: /rules-to-better-technical-documentation
5. 404 page: Any broken link

Definition of Done

• All styling matches current production site and Figma designs
• All functionality works as expected across test pages
• No console errors or broken links
• Cross-browser testing completed
• Responsive design verified on mobile/tablet

[PothieuG]

Feedback 1

The current site and JD’s Figma mockup shows paragraphs and list items with a margin-bottom…

…which is missing from https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/the-value-of-consistency

⚠️ This is crucial for readability

1. Please make sure every regular content paragraph has a margin-bottom: 1rem;
2. Every regular list item (ordered and unordered) has a margin-bottom: .75rem;

From

To

[PothieuG]

Feedback 2

The video in this rule is broken https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/the-value-of-consistency

It is working fine on the current site: https://www.ssw.com.au/rules/the-value-of-consistency/

1. Please investigate and fix
2. Make sure other videos are working too

[PothieuG]

Feedback 3

On https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/
I see a wrong red in the “see more” link

1. Please investigate and fix
2. Make sure all the red in the site is correct

[PothieuG]

Feedback 4

On https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/rules-to-better-ai-development

These 3 lines should be aligned

Tip: you can do it with CSS flex. Ping me if you need help

1. Please investigate and fix

[PothieuG]

Feedback 5

On https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/rules-to-better-ai-development

If you click on the “items per page” selector and scroll down, the dropdown gets broken and attached to the bottom edge of the page

1. Please investigate and fix

❌Figure: Bug with selector

UI – Right now it kind of blends with the rest of the text next to it… we need to add extra spacing, and add borders to the selector, as per the Figma:

✅Figure: Looks better on Figma

[PothieuG]

Feedback 6

1. Please fix the CSS styling for tables in content

From

To

[PothieuG]

Feedback 7

1. Please align header to content (as per Figma)

From

To

[PothieuG]

Feedback 8

On https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/rules-to-better-ai-development

If you click the logo “SSW Rules” you get a broken link

1. Please investigate and fix
2. 404 page – Add the word “404”
3. 404 page – Make sure there is space below “Take me home” button
4. 404 page – Ideally use the same text as the current 404 e.g. https://www.ssw.com.au/rules/typoo
5. 404 page – Include the link to https://www.ssw.com.au/rules/404-useful-error-page

[PothieuG]

Feedback 9

On https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/rules-to-better-technical-documentation

See how ordered lists under lists are getting bullet points

1. Please investigate and fix
2. Please also action this related Issue: https://github.com/SSWConsulting/SSW.Rules/issues/1616

More on this: There is also a different related BUG on lists inside a box – they show 2 overlapped bullet points:

1. Please investigate and fix

Example on https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/avoid-repetition

[PothieuG]

Feedback 10

The current site has a nice feature which gives headings an anchor link when you hover them…
E.g. https://www.ssw.com.au/rules/rule/#this-is-a-heading-4

This is missing on https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/

1. Please add feature to automatically have anchor links to headings (from H2 to H4)

Figure: Hovering the heading gives user an anchor link. This is auto-generated

[PothieuG]

Feedback 11

The current site has adopted less is more on the sidebar “Categories” section. They don’t include the words “Rules to Better”

This is missing on https://ssw-rules-tina-production-f8dhamhjhaggbdan.australiaeast-01.azurewebsites.net/ making category links longer than necessary

1. Please fix by removing the repeated words

2. For the styling… as per Figma file, please change the CSS class for these buttons from:
   p-2
   To
   py-1 px-2

This is how they should look like:

[Freego1783]

✅All done except Feedback 10 - it will be dealt with in another PBI as it requires a bit more work

PBI for Feedback 10 - See: #1942

Figure: 1 - proper margin for paragraphs and list items

Figure: 2 - youtube shorts videos working now

Figure: 3 - SSW red used consistently

Figure: 4 & 5 - rules list aligment + pagination styles

Figure: 6 - table styles

Figure: 7 & 8 - header padding + restyled 404 page

Figure: 9 - no more overlapping bullet points

Figure: 11 - shorter category names