Restrict small user avatar picture size to square

assets/css/app/helpers.css

@@ -36,18 +36,6 @@
     height: 1.5em;
 }
 
-.hoverpic {
-    min-width: 10px;
-    max-width: 30px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.thumbnail-sm {
-    max-height: 100px;
-}
-
 /* Show symbol after exteral links */
 /*noinspection CssNoGenericFontName*/
 a[target="_blank"].link-external:after {

assets/css/app/images.css

@@ -0,0 +1,37 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2023 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.hoverpic {
+    min-width: 10px;
+    max-width: 30px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.thumbnail-sm {
+    max-height: 100px;
+}
+
+.avatar-xs {
+    height: 1.2rem;
+    width: 1.2rem;
+    object-fit: cover;
+    border-radius: 5px;
+}

assets/js/app.js

@@ -26,6 +26,7 @@ import '../css/app/darkmode.css';
 import '../css/app/tables.css';
 import '../css/app/bs-overrides.css';
 import '../css/app/treeview.css';
+import '../css/app/images.css';
 
 // start the Stimulus application
 import '../bootstrap';

src/DataTables/LogDataTable.php

@@ -234,7 +234,7 @@ class LogDataTable implements DataTableTypeInterface
                 $img_url = $this->userAvatarHelper->getAvatarSmURL($user);
 
                 return sprintf(
-                    '<img src="%s" data-thumbnail="%s" class="rounded" style="height: 1.2rem;" data-controller="elements--hoverpic"> <a href="%s">%s</a>',
+                    '<img src="%s" data-thumbnail="%s" class="avatar-xs" data-controller="elements--hoverpic"> <a href="%s">%s</a>',
                     $img_url,
                     $this->userAvatarHelper->getAvatarMdURL($user),
                     $this->urlGenerator->generate('user_info', ['id' => $user->getID()]),

templates/helper.twig

@@ -169,7 +169,7 @@
 {% endmacro %}
 
 {% macro user_icon(user) %}
-    <img src="{{ avatar_helper.avatarSmURL(user) }}" class="rounded" style="height: 1.2rem;" alt="User avatar" {{ stimulus_controller('elements/hoverpic') }} data-thumbnail="{{ avatar_helper.avatarMdURL(user) }}">
+    <img src="{{ avatar_helper.avatarSmURL(user) }}" class="avatar-xs" alt="User avatar" {{ stimulus_controller('elements/hoverpic') }} data-thumbnail="{{ avatar_helper.avatarMdURL(user) }}">
 {% endmacro %}
 
 {% macro entity_preview_sm(entity) %}