CSS Button Spacing - Layout Issue Detected

[ghost]

Bug Description

I checked your Demo website as a guest and also as a demo user. I noticed the way in which your buttons were being displayed when you have enough that needs to be presented on multiple lines (as it would appear).

These buttons are controlled via the CSS btn, btn-light and btn-sm and they have been assigned padding, but not margins. In order to separate them, a simple whitespace has been applied (don't understand why when already using CSS).

These buttons display too close together when needing to wrap on the same line because the width distinguishes the space available.

What I find interesting is this happens when logged in, yet when viewing as guest, you get a nicer layout with spacing:

Although, this spacing is not equal because of the use of whitespace instead of correctly using CSS Margins.

How to reproduce

1. Visit the demo site: https://demo.linkace.org
2. View as guest and made the window smaller by shrinking the width of your browser OR
3. View as registered user and you can see the tags as an example

Expected behavior

I would have expected the spacing to be equal around the button styling using CSS. Instead, no control of margins have been applied when buttons need to wrap. This causes them to be way closer (touching) and makes it much harder to read and distinguish.

• I would expect for the whitespace not to be used (not really needed when already using CSS)

Example code used:

<div class="card-body">
    <a href="https://demo.linkace.org/tags/000" class="btn btn-light btn-sm">example</a>[whitespace]
    <a href="https://demo.linkace.org/tags/000" class="btn btn-light btn-sm">example</a>[whitespace]
    <a href="https://demo.linkace.org/tags/000" class="btn btn-light btn-sm">example</a>[whitespace]
</div>

You are clearly using word-wrap: break-word; conditions within the .card elements already.

• Use CSS styling instead within the btn element id to create 1px margin and remove the whitespace:

Example change:

.btn {
	--bs-btn-padding-x: 0.75rem;
	--bs-btn-padding-y: 0.375rem;
	--bs-btn-font-family: ;
	--bs-btn-font-size: 1rem;
	--bs-btn-font-weight: 400;
	--bs-btn-line-height: 1.5;
	--bs-btn-color: #cbd5e1;
	--bs-btn-bg: transparent;
	--bs-btn-border-width: 1px;
	--bs-btn-border-color: transparent;
	--bs-btn-border-radius: 0.375rem;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-box-shadow: inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 1px rgba(0,0,0,.075);
	--bs-btn-disabled-opacity: 0.65;
	--bs-btn-focus-box-shadow: 0 0 0 0.15rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
	background-color: var(--bs-btn-bg);
	border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
	border-radius: var(--bs-btn-border-radius);
	color: var(--bs-btn-color);
	cursor: pointer;
	display: inline-block;
	font-family: var(--bs-btn-font-family);
	font-size: var(--bs-btn-font-size);
	font-weight: var(--bs-btn-font-weight);
	line-height: var(--bs-btn-line-height);
	padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
	text-align: center;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	vertical-align: middle;
        margin: 1px; /* NEW CONDITION */
}

When you have also removed the whitespace, you get this much better layout:

Allowing the CSS wrap condition to correctly perform its job but not using whitespace to add layout, and controlling how close each button is when wrapped one under the other.

Logs

N/A

Screenshots

Already provided above.

LinkAce version

Demo Website

Setup Method

Docker

Operating System

Linux (Ubuntu, CentOS,...)

Client details

• Ubuntu
• Firefox
• Chromium
• Brave
  All recent and up to date as of this issue.

[Kovah]

Thanks for the detailed report. I will have a look as soon as possible. Likely forgot to add some styles to the guest pages.

[ghost]

Thanks for the feedback. I did view as guest but also logged in to the guest demo site too. So not just guest viewing, but also logged in too. However, the guest pages look good when not logged in but when you do log in, the layout becomes skewed as demonstrated above. It will be a simple fix as I only added a single line in the CSS property to fix everything regardless because it would appear, the CSS is used across both statuses.

Again, thanks for coming back to me. Appreciate your time.