fix: multiple small style fixes/improvements (#316)

* fix(ui-nav): use selected ring and remove item margin override

* fix(listings): format prices as 1.234,50 € with tabular numerals

* fix(listings): align watchlist star button styles

* fix(version-banner): set margin-bottom to 16px

* fix(ui-nav): keep selected ring with focus reset

* fix(listings): right-align price values

* fix(listings): remove cart icon from price display

* fix(listings): format detail price with shared formatter

* revert(listings): restore grid tile layout from master

Drop watchlist/actions restyle on grid cards.

ui/src/components/navigation/Navigate.less

@@ -112,9 +112,9 @@
 
 .semi-navigation-item {
   border-radius: @radius-btn !important;
+  border: 1px solid transparent !important;
   color: @color-muted !important;
-  transition: background @transition-fast, color @transition-fast !important;
-  margin: 2px 8px !important;
+  transition: background @transition-fast, color @transition-fast, border-color @transition-fast !important;
 
   &:hover {
     color: @color-text !important;
@@ -123,7 +123,7 @@
   &.semi-navigation-item-selected,
   &[aria-selected="true"] {
     background: rgba(224,74,56,0.12) !important;
-    border: 1px solid rgba(224,74,56,0.25) !important;
+    border-color: rgba(224,74,56,0.25) !important;
     color: @color-text !important;
 
     .semi-navigation-item-icon {

ui/src/components/table/ListingsTable.jsx

@@ -6,7 +6,6 @@
 import { Button, Tooltip } from '@douyinfe/semi-ui-19';
 import {
   IconBriefcase,
-  IconCart,
   IconDelete,
   IconLink,
   IconMapPin,
@@ -15,6 +14,7 @@ import {
   IconEyeOpened,
 } from '@douyinfe/semi-icons';
 import no_image from '../../assets/no_image.png';
+import { formatEuroPrice } from '../../services/price/priceService.js';
 import * as timeService from '../../services/time/timeService.js';
 import StatusControl from '../listings/StatusControl.jsx';
 
@@ -52,10 +52,7 @@ const ListingsTable = ({ listings, onWatch, onNavigate, onDelete, onStatusChange
 
         <div className="listingsTable__row__price">
           {item.price ? (
-            <>
-              <IconCart size="small" />
-              {item.price}
-            </>
+            formatEuroPrice(item.price)
           ) : (
             <span className="listingsTable__row__empty">---</span>
           )}

ui/src/components/table/ListingsTable.less

@@ -55,8 +55,11 @@
       color: @color-success;
       display: flex;
       align-items: center;
+      justify-content: flex-end;
       gap: 4px;
       white-space: nowrap;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
     }
 
     &__address {
@@ -94,26 +97,33 @@
     }
 
     &__star {
-      width: 28px;
-      height: 28px;
-      background: transparent;
-      border: none;
+      width: 30px;
+      height: 30px;
+      background: rgba(0,0,0,0.28);
+      border: 1px solid rgba(255,255,255,0.12);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       padding: 0;
-      transition: background @transition-fast;
+      transition: background @transition-fast, border-color @transition-fast, transform @transition-fast;
       flex-shrink: 0;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.1);
+        background: rgba(0,0,0,0.48);
+        border-color: rgba(255,255,255,0.22);
+        transform: translateY(-1px);
+      }
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(224,74,56,0.35);
       }
 
       svg {
         color: @color-accent;
-        font-size: 14px;
+        font-size: 15px;
       }
     }
 

ui/src/components/version/VersionBanner.less

@@ -1,5 +1,5 @@
 .versionBanner {
-  margin-bottom: 0 !important;
+  margin-bottom: 16px;
 
   .semi-banner-body {
     padding: 6px 16px;

ui/src/services/price/priceService.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2026 by Christian Kellner.
+ * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
+ */
+
+const euroPriceFormatter = new Intl.NumberFormat('de-DE', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/**
+ * @param {number|string} price
+ * @returns {string}
+ */
+export const formatEuroPrice = (price) => {
+  const parsedPrice = Number(price);
+  if (!Number.isFinite(parsedPrice)) {
+    return `${price} €`;
+  }
+
+  return `${euroPriceFormatter.format(parsedPrice)} €`;
+};

ui/src/views/listings/ListingDetail.jsx

@@ -41,6 +41,7 @@ import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import no_image from '../../assets/no_image.png';
 import * as timeService from '../../services/time/timeService.js';
+import { formatEuroPrice } from '../../services/price/priceService.js';
 import { distanceMeters, getBoundsFromCoords } from './mapUtils.js';
 import { xhrPost, xhrDelete } from '../../services/xhr.js';
 import ListingDeletionModal from '../../components/ListingDeletionModal.jsx';
@@ -323,7 +324,11 @@ export default function ListingDetail() {
   const data = [
     {
       key: 'Price',
-      value: `${listing.price} €`,
+      value: listing.price ? (
+        <span className="listing-detail__price">{formatEuroPrice(listing.price)}</span>
+      ) : (
+        'N/A'
+      ),
       Icon: <IconCart />,
       helpText: 'The asking price of this listing, as reported by the provider.',
     },

ui/src/views/listings/ListingDetail.less

@@ -199,6 +199,10 @@
     font-size: 0.9rem;
     padding: 0.2rem 0.6rem;
   }
+
+  &__price {
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 .listing-detail-popup {