Polish block sidebar interactions

src/app/pages/main/editor-sidebar/editor-sidebar.html

@@ -48,9 +48,6 @@
       }
       @case ('blocks') {
       <app-group-holder title="Blocks" icon="bi-boxes">
-        <i ngProjectAs="header-button" 
-          class="bi bi-plus-circle-fill text-blue-600 hover:cursor-pointer hover:text-blue-400 text-lg"
-          (click)="createNewBlock()"></i>
         <app-blocks-list></app-blocks-list>
       </app-group-holder>
       }

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;

src/app/shared/blocks-list/blocks-list.html

@@ -33,10 +33,24 @@
         <div matCardAvatar class="blocks-list-card-avatar">
           <mat-icon [fontIcon]="block.userInteractive ? 'touch_app' : 'auto_awesome'"></mat-icon>
         </div>
-        <mat-card-title class="blocks-list-card-title">{{ block.type }}</mat-card-title>
-        <mat-card-subtitle class="blocks-list-card-subtitle">
-          {{ block.userInteractive ? 'Interactive' : 'Automatic' }}
-        </mat-card-subtitle>
+        <div class="blocks-list-card-heading">
+          <div class="blocks-list-card-title-row">
+            <mat-card-title class="blocks-list-card-title">{{ block.type }}</mat-card-title>
+            <button
+              type="button"
+              class="blocks-list-card-info"
+              matTooltip="{{ block.description }}"
+              aria-label="Show block description"
+              title=""
+              (pointerdown)="$event.stopPropagation()"
+              (click)="$event.stopPropagation()">
+              <mat-icon fontIcon="info"></mat-icon>
+            </button>
+          </div>
+          <mat-card-subtitle class="blocks-list-card-subtitle">
+            {{ block.userInteractive ? 'Interactive' : 'Automatic' }}
+          </mat-card-subtitle>
+        </div>
       </mat-card-header>
       <mat-card-content class="blocks-list-card-content">
         <p class="blocks-list-card-copy">{{ block.description }}</p>

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',
 })