Fix table mobile card top border

[britneywwc]

Done

• Fixed the issue where top border wasn't consistent with the other border sides

Fixes #5001, WD-9104

QA

• Open demo
• Go to https://vanilla-framework-5005.demos.haus/docs/examples/patterns/tables/table-mobile-card or https://vanilla-framework-5005.demos.haus/docs/examples/patterns/tables/table-mobile-card-dark
• Make sure border sides are all equal size and same colour

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-5005.demos.haus

[bartaz]

@lyubomir-popov Is this OK to use $input-border-thickness for table rows, or is it reserved to other (interactive) elements?

[bartaz]

@britneywwc Why changing this to $input-border-thickness?

Overall the fix works fine, but I'm worried that changing the width of the border on ALL rows may affect other things.

[britneywwc]

I tried to match the border thickness with the table-mobile-card's border which inherits from $border.

Would it be better to change it in p-table--mobile-card rather than %table-row-border so that it uses the same border thickness (1px) as the previous table rows? Just so it won't affect other things and only change within the table-mobile-card component.

[bartaz]

Yes, I think we need to treat it separate from standard table row border.

In mobile card small screen view we want those to look like card component, so the border around each card (row) should be the same as in card, so as you mentioned it should be $border

As in:

  %vf-is-bordered {
    border: $border;
  }

[bartaz]

I think this needs to stay as -low-contrast or otherwise all row borders in all columns become move visible than they are now.

[bartaz]

Thanks @britneywwc.

I applied some small changes to clean up the last issues (it turns out the main problem was specificity of the card styling).