diff --git a/src/app/pages/main/editor-sidebar/editor-sidebar.html b/src/app/pages/main/editor-sidebar/editor-sidebar.html
index 1ec1bcc..45de2c1 100644
--- a/src/app/pages/main/editor-sidebar/editor-sidebar.html
+++ b/src/app/pages/main/editor-sidebar/editor-sidebar.html
@@ -48,9 +48,6 @@
}
@case ('blocks') {
-
}
diff --git a/src/app/shared/blocks-list/blocks-list.css b/src/app/shared/blocks-list/blocks-list.css
index 8efa84e..94bceb9 100644
--- a/src/app/shared/blocks-list/blocks-list.css
+++ b/src/app/shared/blocks-list/blocks-list.css
@@ -1,5 +1,7 @@
:host {
- display: block;
+ display: flex;
+ flex: 1 1 auto;
+ min-height: 0;
height: 100%;
}
@@ -12,10 +14,12 @@
.blocks-list-root {
display: flex;
+ flex: 1 1 auto;
flex-direction: column;
width: 100%;
min-width: 0;
height: 100%;
+ min-height: 0;
overflow-x: hidden;
}
@@ -36,19 +40,22 @@
.blocks-list-items {
display: flex;
- flex: 1;
+ flex: 1 1 auto;
flex-direction: column;
+ align-items: stretch;
gap: 8px;
width: 100%;
min-width: 0;
- height: 100%;
- max-height: calc(100vh - 320px);
+ min-height: 0;
+ box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
- padding: 8px 0;
+ padding: 8px 0 20px;
}
.blocks-list-card {
+ display: block;
+ flex-shrink: 0;
width: 100%;
min-width: 0;
overflow: hidden;
@@ -81,6 +88,20 @@
padding: 14px 14px 0;
}
+.blocks-list-card-heading {
+ display: flex;
+ flex: 1 1 auto;
+ min-width: 0;
+ flex-direction: column;
+}
+
+.blocks-list-card-title-row {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ min-width: 0;
+}
+
.blocks-list-card-avatar {
display: flex;
align-items: center;
@@ -100,6 +121,7 @@
}
.blocks-list-card-title {
+ flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -109,6 +131,27 @@
color: #0f172a;
}
+.blocks-list-card-info {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ padding: 0;
+ border: 0;
+ border-radius: 999px;
+ background: rgba(224, 242, 254, 0.95);
+ color: #0369a1;
+ cursor: default;
+ flex-shrink: 0;
+}
+
+.blocks-list-card-info .mat-icon {
+ width: 14px;
+ height: 14px;
+ font-size: 14px;
+}
+
.blocks-list-card-subtitle {
color: #475569;
font-size: 12px;
diff --git a/src/app/shared/blocks-list/blocks-list.html b/src/app/shared/blocks-list/blocks-list.html
index 44e8ab9..64b04a4 100644
--- a/src/app/shared/blocks-list/blocks-list.html
+++ b/src/app/shared/blocks-list/blocks-list.html
@@ -33,10 +33,24 @@
- {{ block.type }}
-
- {{ block.userInteractive ? 'Interactive' : 'Automatic' }}
-
+
+
+ {{ block.type }}
+
+
+
+ {{ block.userInteractive ? 'Interactive' : 'Automatic' }}
+
+
{{ block.description }}
diff --git a/src/app/shared/blocks-list/blocks-list.ts b/src/app/shared/blocks-list/blocks-list.ts
index 78ac0e7..111624b 100644
--- a/src/app/shared/blocks-list/blocks-list.ts
+++ b/src/app/shared/blocks-list/blocks-list.ts
@@ -9,11 +9,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { BLOCK_TYPE_DRAG_MIME } from './block-drag';
@Component({
selector: 'app-blocks-list',
- imports: [FormsModule, MatCardModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule],
+ imports: [FormsModule, MatCardModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule, MatTooltipModule],
templateUrl: './blocks-list.html',
styleUrl: './blocks-list.css',
})