Refine device inventory animations and diagnostics layout

src/web/styles.css

@@ -946,7 +946,7 @@ p {
   display: flex;
   align-items: flex-end;
   gap: 2px;
-  padding-top: 11px;
+  padding: 11px 27px 0 0;
 }
 
 .client-device-main > h3 {
@@ -1040,10 +1040,11 @@ p {
 }
 
 .client-device-edit-wrap {
-  flex: 0 0 auto;
+  position: absolute;
+  right: 0;
+  bottom: 0;
   width: 23px;
   height: 23px;
-  align-self: flex-end;
   opacity: 0.34;
   transition: opacity 180ms ease, filter 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -1093,9 +1094,16 @@ p {
   color: var(--client-accent);
 }
 
-.client-device-edit:hover svg,
-.client-device-edit:focus-visible svg {
-  transform: translate(1px, -1px) rotate(-4deg);
+.client-device-edit.is-writing svg {
+  animation: client-device-pencil-write 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes client-device-pencil-write {
+  0%, 100% { transform: translate(0, 0) rotate(0); }
+  22% { transform: translate(1px, -1px) rotate(-5deg); }
+  44% { transform: translate(-1px, 1px) rotate(-2deg); }
+  66% { transform: translate(1px, 0) rotate(-5deg); }
+  84% { transform: translate(0, 1px) rotate(-2deg); }
 }
 
 .client-device-pin[aria-pressed="true"] {
@@ -4624,7 +4632,6 @@ p {
 }
 
 .client-diagnostics-feedback {
-  min-height: 34px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -4838,43 +4845,6 @@ p {
   color: oklch(0.68 0.15 28);
 }
 
-.client-diagnostics-details {
-  margin: 0 8px;
-  color: var(--client-muted);
-  font-size: 9px;
-}
-
-.client-diagnostics-details summary {
-  width: fit-content;
-  padding: 6px 0;
-  color: var(--client-text);
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.client-diagnostics-details summary:focus-visible {
-  outline: 2px solid var(--client-accent);
-  outline-offset: 2px;
-}
-
-.client-diagnostics-details > div {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
-  padding-top: 10px;
-}
-
-.client-diagnostics-details section {
-  min-width: 0;
-  display: grid;
-  gap: 5px;
-}
-
-.client-diagnostics-details p {
-  overflow-wrap: anywhere;
-  line-height: 1.55;
-}
-
 @media (max-width: 560px) {
   .client-diagnostics-table th,
   .client-diagnostics-table td {
@@ -4889,10 +4859,8 @@ p {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .client-diagnostics-add-action,
-  .client-diagnostics-details > div {
+  .client-diagnostics-add-action {
     grid-column: 1;
-    grid-template-columns: minmax(0, 1fr);
   }
 }