diff --git a/src/components/selectionbar/SubgraphNodeWidget.vue b/src/components/selectionbar/SubgraphNodeWidget.vue
index e3fbacae2..6a966760f 100644
--- a/src/components/selectionbar/SubgraphNodeWidget.vue
+++ b/src/components/selectionbar/SubgraphNodeWidget.vue
@@ -19,15 +19,20 @@ function onClick() {
 }
 </script>
 <template>
-  <div class="widget-item">
-    <div class="icon">
+  <div class="widget-item items-center gap-1">
+    <div class="size-4">
       <i-lucide:grip-vertical v-if="isDraggable" />
     </div>
-    <div class="widget-title">
+    <div class="flex-1">
       <div class="widget-node">{{ nodeTitle }}</div>
       <div class="widget-name">{{ widgetName }}</div>
     </div>
-    <Button size="small" text severity="secondary" @click.stop="onClick">
+    <Button
+      size="small"
+      class="shrink-0"
+      severity="secondary"
+      @click.stop="onClick"
+    >
       <i-lucide:eye v-if="isShown" />
       <i-lucide:eye-off v-else />
     </Button>
@@ -35,39 +40,17 @@ function onClick() {
 </template>
 
 <style scoped>
-.icon {
-  width: 16px;
-  height: 16px;
-}
 .widget-item {
   display: flex;
   padding: 4px 16px 4px 0;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  border-radius: 4px;
-  background: var(--bg-color, #202020);
-}
-.widget-title {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
+  word-break: break-all;
 }
 .widget-node {
-  display: flex;
-  height: 15px;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-self: stretch;
-  color: var(--color-text-secondary, #9c9eab);
+  color: var(--color-slate-100, #9c9eab);
 
   /* heading-text-nav */
   font-family: Inter;
   font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
 }
 .widget-name {
   color: var(--color-text-primary, #fff);
@@ -75,8 +58,5 @@ function onClick() {
   /* body-text-small */
   font-family: Inter;
   font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
 }
 </style>