Skip to content

🐛 Bug - Profile badges are oversized and poorly spaced on SSW People profiles #814

@ssw-yakshaver

Description

@ssw-yakshaver

Requested by: @tiagov8 via YakShaver.ai 🦬
cc: @tiagov8, @adamcogan, @GordonBeeming, @bradystroud, @jeoffreyfischer, @joshbermanssw

Hi Team!

  🟥  Watch the video (3 min 21 sec)

  Url from screen share: https://ssw.com.au/people/brady-stroud/

Pain

Profile skill/badge images on SSW People profiles are currently too large, lack spacing between each other, and are not visually separated from the main profile content. Badges are rendered inside the same content container, causing layout issues and inconsistency. Some profiles also contain manually added <hr> elements to compensate for the missing visual separation. The badges should be moved into their own container, resized consistently, spaced evenly, and separated from the rest of the profile content using CSS rather than manual HTML.

Acceptance Criteria

  1. Badge images are moved into a dedicated container separate from the main profile content div
  2. Badge images are displayed at a consistent size (100px x 100px)
  3. Badges have consistent spacing between them (e.g. 0.5rem margin)
  4. A visual border separates the profile content (title/skills) from the badges using CSS
  5. Existing manually added <hr> elements in profile content are removed or no longer required
  6. Layout changes apply consistently across all SSW People profiles
  7. No inline styles are required for badge sizing after the change

Reproduce Steps

  1. Navigate to the SSW People site
  2. Open any staff profile with skill/badge images
  3. Observe that badge images are oversized, tightly spaced, and embedded within the main content area
  4. Compare profiles where <hr> tags were manually added to create separation

Screenshot

Screenshot
Figure: Profile badges oversized and cramped, needing spacing and visual separation from content

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions