fix: right align plus and delete icons in tables to avoid horizontal layout shifts

Author: m1rm

internal/ui/packagepage/templates.templ

@@ -83,7 +83,7 @@ templ CompareTable(pkgs []packages.PackagePopularity, query string, offset int,
 			<tr>
 				<th scope="col">Package</th>
 				<th scope="col">Popularity</th>
-				<th scope="col" class="d-none d-lg-table-cell text-center">Compare</th>
+				<th scope="col" class="d-none d-lg-table-cell text-end">Compare</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -92,10 +92,10 @@ templ CompareTable(pkgs []packages.PackagePopularity, query string, offset int,
 					<td class="text-nowrap align-middle">
 						<a href={ templ.SafeURL("/packages/" + pkg.Name) }>{ pkg.Name }</a>
 					</td>
-					<td class="w-75 align-middle">
+					<td class="w-75">
 						@components.PopularityBar(pkg.Popularity)
 					</td>
-					<td class="align-middle text-center">
+					<td class="align-middle text-end">
 						<a
 							class="text-danger"
 							href={ toggleURL(query, offset, limit, compare, pkg.Name) }
@@ -129,7 +129,7 @@ templ PackageTable(pkgs []packages.PackagePopularity, query string, offset int,
 					<td class="w-75 align-middle">
 						@components.PopularityBar(pkg.Popularity)
 					</td>
-					<td class="align-middle text-center">
+					<td class="align-middle text-end">
 						if isSelected(compare, pkg.Name) {
 							<a
 								class="text-danger"