From 66719a14f52ee296e38e7ddfe67beeb5b9618e83 Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Fri, 26 Jun 2026 09:42:22 +0200
Subject: [PATCH] :bug: Fix assets typography container is longer than others
 (#10406)

* :bug: Fix assets typography container is longer than others

* :recycle: Use new SCSS guidelines
---
 .../sidebar/assets/typographies.scss          | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
index ebeac8d502..4c841ffbae 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
@@ -4,19 +4,21 @@
 //
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
 
 .assets-list {
-  padding: 0 0 0 deprecated.$s-4;
+  padding: 0 0 0 var(--sp-xs);
 }
 
 .drop-space {
-  height: deprecated.$s-12;
+  block-size: $sz-12;
 }
 
 .grid-placeholder {
-  height: deprecated.$s-2;
-  width: 100%;
+  block-size: px2rem(2);
+  inline-size: 100%;
   background-color: var(--color-accent-primary);
 }
 
@@ -24,18 +26,19 @@
   position: relative;
   display: flex;
   align-items: center;
-  margin-bottom: deprecated.$s-4;
-  border-radius: deprecated.$br-8;
-  background-color: var(--assets-item-background-color);
+  margin-block-end: var(--sp-xs);
+  border-radius: $br-8;
+  background-color: var(--color-background-tertiary);
+  inline-size: var(--options-width);
 }
 
 .dragging {
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
-  border-radius: deprecated.$s-8;
-  background-color: var(--assets-item-background-color-drag);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  border: $b-2 solid var(--color-accent-primary-muted);
+  border-radius: $br-8;
+  background-color: transparent;
 }