updated shared screen styling

btc-UI/src/app/components/middle-section/middle-section.component.css

@@ -23,10 +23,11 @@ div[style*="background-color: black"] .custom-cell {
 .middle-section-container {
   display: flex;
   gap: 1rem;
-  height: 38vh;
   width: 100%;
+  /* height is now controlled dynamically via [ngStyle] */
 }
 
+
 /* Desktop view (default) */
 .main-table {
   width: 60%;

btc-UI/src/app/components/middle-section/middle-section.component.html

@@ -1,5 +1,6 @@
 <!-- Responsive Container -->
-<div class="middle-section-container">
+<div class="middle-section-container" [ngStyle]="{ height: containerHeight }">
+
   <!-- Transaction Summary -->
   <div class="transaction-summary">
     <div
@@ -33,7 +34,7 @@
   </div>
 
   <!-- Main Table -->
-  <div class="main-table">
+  <div class="main-table ">
     <div
       class="p-2 rounded h-100 d-flex flex-column justify-content-between"
       style="background-color: #f1f1f1df"

btc-UI/src/app/components/middle-section/middle-section.component.ts

@@ -1,15 +1,32 @@
-import { Component } from '@angular/core';
+// import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';  // ✅ Import this
+// import { CommonModule } from '@angular/common';  // ✅ Import this
+
+// @Component({
+//   selector: 'app-middle-section',
+//   standalone: true,
+//   imports: [CommonModule],  // ✅ Add CommonModule here
+//   templateUrl: './middle-section.component.html',
+//   styleUrls: ['./middle-section.component.css']
+// })
+// export class MiddleSectionComponent {
+//   rows = Array.from({ length: 5 });
+//   summaryRows = Array.from({ length: 4 }); // 4 empty rows for now
+
+// }
+
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-middle-section',
   standalone: true,
-  imports: [CommonModule],  // ✅ Add CommonModule here
+  imports: [CommonModule],
   templateUrl: './middle-section.component.html',
   styleUrls: ['./middle-section.component.css']
 })
 export class MiddleSectionComponent {
+  @Input() containerHeight: string = '50vh'; // default for home screen
+
   rows = Array.from({ length: 5 });
   summaryRows = Array.from({ length: 4 }); // 4 empty rows for now
-
 }

btc-UI/src/app/home/home.component.html

@@ -17,7 +17,7 @@
 
     <!-- Main Content -->
     <div class="flex-grow-1 p-3">
-      <app-middle-section></app-middle-section>
+      <app-middle-section [containerHeight]="'38vh'"></app-middle-section>
 
       <!-- Tablet View Touchpad -->
       <div *ngIf="isTabletView" class="mt-3">

btc-UI/src/app/login/login.component.html

@@ -19,7 +19,7 @@
     </div>
 
     <!-- Scan Enable/Disable Toggle Button -->
-    <button
+    <!-- <button
       type="button"
       class="scan-toggle-btn"
       (click)="toggleScan()"
@@ -27,7 +27,7 @@
       style="margin-bottom: 10px"
     >
       Scanner: {{ scanningEnabled ? "ON" : "OFF" }}
-    </button>
+    </button> -->
     <!-- End Scan Toggle Button -->
 
     <!-- Login Form -->