Fix api token rendering (jenkinsci#11321)

* Fix api token css

Change jenkinsci#11141 added display: flex with direction column to jenkins-card.
This broke the styling of the api token display
This makes the api-tokens more independent from jenkins-card

* prettier

Author: mawinter69

core/src/main/resources/jenkins/security/ApiTokenProperty/config.jelly

@@ -62,7 +62,7 @@ THE SOFTWARE.
         </d:tag>
     </d:taglib>
     <div class="jenkins-hidden" id="api-token-row-template" xmlns:local="local">
-        <div class="token-card jenkins-card" id="${token.uuid}">
+        <div class="token-card" id="${token.uuid}">
             <div class="token-card-inner">
                 <div class="token-card__title">
                     <span class="token-name">${token.name}</span>
@@ -122,7 +122,7 @@ THE SOFTWARE.
                             <j:set var="legacyClazz" value="legacy-token" />
                             <j:set var="legacyToolTip" value="${%LegacyToken}" />
                         </j:if>
-                        <div class="token-card jenkins-card ${legacyClazz}" id="${token.uuid}">
+                        <div class="token-card ${legacyClazz}" id="${token.uuid}">
                             <div class="token-card-inner">
                                 <div class="token-card__title ${legacyClazz}" tooltip="${legacyToolTip}">
                                         <j:if test="${token.isLegacy}">

core/src/main/resources/jenkins/security/ApiTokenProperty/resources.css

@@ -26,10 +26,40 @@
   max-width: 700px;
 }
 
+#api-tokens {
+  width: 100%;
+}
+
+#api-token-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.token-card {
+  flex-direction: row;
+  display: flex;
+  gap: 0.5rem;
+  border-radius: var(--form-input-border-radius);
+  background: var(--card-background);
+  position: relative;
+}
+
+.token-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: var(--card-border-width) solid var(--card-border-color);
+  z-index: 1;
+  pointer-events: none;
+}
+
 .token-card__title,
 .token-stats,
 .token-never-used,
-.token-list .jenkins-card,
+.token-list,
 .token-controls {
   display: flex;
   gap: 0.5rem;