style: tablet view version 1

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

@@ -1,3 +1,6 @@
+
+
+
 .borderless-custom {
   border-collapse: separate;
   border-spacing: 4px;
@@ -57,6 +60,16 @@ div[style*="background-color: black"] .custom-cell {
 .pure-white {
   background-color: #ffffff !important;
 }
+/* Desktop view (default) - reorder the layout */
+@media (min-width: 801px) {
+  .main-table {
+    order: 1;
+  }
+
+  .transaction-summary {
+    order: 2;
+  }
+}
 
 /* Responsive layout for tablet and mobile */
 @media (max-width: 800px) {
@@ -64,10 +77,10 @@ div[style*="background-color: black"] .custom-cell {
     flex-direction: column;
     align-items: center;
     height: auto;
-    overflow-y: auto;
+    max-height: 50vh; /* Optional: set a cap to avoid too much height */
+    overflow-y: auto; /* Add vertical scrollbar */
     padding-bottom: 1rem;
   }
-
   .transaction-summary,
   .main-table {
     width: 80% !important;

src/app/components/touch-pad-menu/touch-pad-menu.component.css

@@ -5,6 +5,19 @@
   border-radius: 8px;
 }
 
+.scrollable-touchpad {
+  max-height: 65vh;
+  overflow-y: auto;
+}
+
+.scrollable-touchpad::-webkit-scrollbar {
+  width: 6px;
+}
+.scrollable-touchpad::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
 button {
   font-weight: bold;
 }
@@ -13,6 +26,86 @@ button {
   background-color: #ffffff !important;
   border: 1px solid #ced4da;
   color: #5d6165;
-  
 }
 
+/* ✅ Tablet & Mobile View */
+@media (max-width: 800px) {
+  .container-fluid {
+    padding: 0 1rem;
+  }
+
+  .row.align-items-center {
+    flex-direction: column !important;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* Stack and center 3 sections */
+  .touch-pad-container .row.gx-2 {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .touch-pad-container .col-3 {
+    width: 90% !important;
+    margin-bottom: 1rem;
+    order: 1;
+  }
+
+  .touch-pad-container .col-3 .row.gx-1 {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .touch-pad-container .col-3 .col-4 {
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
+  }
+
+  .touch-pad-container .col-2 {
+    width: 90% !important;
+    margin-bottom: 1rem;
+    order: 2;
+  }
+
+  .touch-pad-container .col-2 .row.gx-1 {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .touch-pad-container .col-2 .col-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .touch-pad-container .col-2 .col-4 {
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
+  }
+
+  .touch-pad-container .col-7 {
+    width: 90% !important;
+    margin: 0 auto 1rem auto;
+    order: 3;
+  }
+
+  .touch-pad-container .col-7 .row.gx-1 {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .touch-pad-container .col-7 .col-2 {
+    flex: 0 0 16.6667%;
+    max-width: 16.6667%;
+  }
+
+  .col-2 .btn,
+  .col-3 .btn,
+  .col-7 .btn {
+    font-size: 1rem;
+  }
+
+  .scrollable-touchpad {
+    max-height: 40vh;
+  }
+}

src/app/components/touch-pad-menu/touch-pad-menu.component.html

@@ -1,99 +1,98 @@
-<!-- Top Buttons Row -->
+<div class="touch-pad-container scrollable-touchpad">
-<div class="container-fluid mb-2">
+  <div class="container-fluid mb-2">
-  <div class="row align-items-center">
 
-    <!-- Left Buttons (40% width) -->
+    <!-- ✅ Desktop view -->
-    <div class="col-5 d-flex justify-content-between">
+    <div class="row align-items-center d-none d-md-flex">
-      <button class="btn btn-dark flex-fill mx-1">CALC</button>
+      <!-- CALC ERASE BOX FIELD -->
-      <button class="btn btn-dark flex-fill mx-1">ERASE</button>
+      <div class="col-5 d-flex justify-content-between">
-      <button class="btn btn-secondary flex-fill mx-1">BOX</button>
+        <button class="btn btn-dark flex-fill mx-1">CALC</button>
-      <button class="btn btn-secondary flex-fill mx-1">FIELD</button>
+        <button class="btn btn-dark flex-fill mx-1">ERASE</button>
+        <button class="btn btn-secondary flex-fill mx-1">BOX</button>
+        <button class="btn btn-secondary flex-fill mx-1">FIELD</button>
+      </div>
+
+      <!-- COPY -->
+      <div class="col-4 text-center">
+        <button class="btn btn-dark px-4">COPY</button>
+      </div>
+
+      <!-- CLEAR, PR -->
+      <div class="col-3 d-flex justify-content-end gap-2">
+        <button class="btn btn-dark px-4">CLEAR</button>
+        <button class="btn btn-dark px-4">PR</button>
+      </div>
     </div>
 
-    <!-- Middle Button (COPY) -->
+    <!-- ✅ Tablet/Mobile view -->
-    <div class="col-4 text-center">
+    <div class="d-flex flex-column align-items-center gap-2 d-md-none">
-      <button class="btn btn-dark px-4">COPY</button>
+      <!-- CALC ERASE BOX FIELD -->
-    </div>
+      <div class="d-flex flex-wrap justify-content-center gap-2 w-100">
+        <button class="btn btn-dark">CALC</button>
+        <button class="btn btn-dark">ERASE</button>
+        <button class="btn btn-secondary">BOX</button>
+        <button class="btn btn-secondary">FIELD</button>
+      </div>
 
-    <!-- Right Buttons (CLEAR, PR) -->
+      <!-- COPY CLEAR PR in same row -->
-    <div class="col-3 d-flex justify-content-end gap-2">
+      <div class="d-flex flex-wrap justify-content-center gap-2 w-100">
-      <button class="btn btn-dark px-4">CLEAR</button>
+        <button class="btn btn-dark">COPY</button>
-      <button class="btn btn-dark px-4">PR</button>
+        <button class="btn btn-dark">CLEAR</button>
-    </div>
+        <button class="btn btn-dark">PR</button>
-
+      </div>
-  </div>
-</div>
-
-
-<!-- Main Grid -->
-<div class="container-fluid">
-  <div class="row gx-2 gy-2">
-
-    <!-- Label Section: 25% -->
-    <div class="col-3">
-      <div class="p-3 rounded" style="background-color: #f1f1f1df;">
-        <div class="row gx-1 gy-1">
-          <div class="col-4" *ngFor="let label of labelRowsFlat">
-            <button class="btn btn-light w-100">{{ label }}</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Numbers 1 to 30: 55% -->
-    <div class="col-7">
-      <div class="p-3 rounded" style="background-color: #f1f1f1df;">
-        <div class="row gx-1 gy-1">
-          <div class="col-2" *ngFor="let number of numbersFlat">
-            <button class="btn btn-light w-100">{{ number }}</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Numeric Pad: 20% -->
-    <div class="col-2">
-      <div class="p-3 rounded" style="background-color: #f1f1f1df;">
-        <div class="row gx-1 gy-1">
-          <!-- Row 1: 0 and X -->
-          <div class="col-6">
-            <button class="btn btn-secondary w-100">0</button>
-          </div>
-          <div class="col-6">
-            <button class="btn btn-light w-100">X</button>
-          </div>
-
-          <!-- Row 2: 7 8 9 -->
-          <ng-container *ngFor="let key of ['7', '8', '9']">
-            <div class="col-4">
-              <button class="btn btn-light w-100">{{ key }}</button>
-            </div>
-          </ng-container>
-
-          <!-- Row 3: 4 5 6 -->
-          <ng-container *ngFor="let key of ['4', '5', '6']">
-            <div class="col-4">
-              <button class="btn btn-light w-100">{{ key }}</button>
-            </div>
-          </ng-container>
-
-          <!-- Row 4: 1 2 3 -->
-          <ng-container *ngFor="let key of ['1', '2', '3']">
-            <div class="col-4">
-              <button class="btn btn-light w-100">{{ key }}</button>
-            </div>
-          </ng-container>
-
-          <!-- Row 5: Enter and Print -->
-          <div class="col-6">
-            <button class="btn btn-secondary w-100">Enter</button>
-          </div>
-          <div class="col-6">
-            <button class="btn btn-secondary w-100">Print</button>
-          </div>
-        </div>
-      </div>
     </div>
+  </div>
 
+  <!-- Main Grid -->
+  <div class="container-fluid">
+    <div class="row gx-2 gy-2">
+
+      <!-- Label Section -->
+      <div class="col-3">
+        <div class="p-3 rounded" style="background-color: #f1f1f1df;">
+          <div class="row gx-1 gy-1">
+            <div class="col-4" *ngFor="let label of labelRowsFlat">
+              <button class="btn btn-light w-100">{{ label }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Numbers 1 to 30 -->
+      <div class="col-7">
+        <div class="p-3 rounded" style="background-color: #f1f1f1df;">
+          <div class="row gx-1 gy-1">
+            <div class="col-2" *ngFor="let number of numbersFlat">
+              <button class="btn btn-light w-100">{{ number }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Numeric Pad -->
+      <div class="col-2">
+        <div class="p-3 rounded" style="background-color: #f1f1f1df;">
+          <div class="row gx-1 gy-1">
+            <div class="col-6"><button class="btn btn-secondary w-100">0</button></div>
+            <div class="col-6"><button class="btn btn-light w-100">X</button></div>
+
+            <ng-container *ngFor="let key of ['7', '8', '9']">
+              <div class="col-4"><button class="btn btn-light w-100">{{ key }}</button></div>
+            </ng-container>
+
+            <ng-container *ngFor="let key of ['4', '5', '6']">
+              <div class="col-4"><button class="btn btn-light w-100">{{ key }}</button></div>
+            </ng-container>
+
+            <ng-container *ngFor="let key of ['1', '2', '3']">
+              <div class="col-4"><button class="btn btn-light w-100">{{ key }}</button></div>
+            </ng-container>
+
+            <div class="col-6"><button class="btn btn-secondary w-100">Enter</button></div>
+            <div class="col-6"><button class="btn btn-secondary w-100">Print</button></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
   </div>
 </div>

src/app/home/home.component.html

@@ -13,11 +13,17 @@
 
     <!-- Main Content -->
     <div class="flex-grow-1 p-3">
+      <!-- Middle section -->
       <app-middle-section></app-middle-section>
+
+      <!-- 👇 Show Touch Pad *here* for Tablet/Mobile View -->
+      <div *ngIf="isTabletView" class="mt-3">
+        <app-touch-pad-menu></app-touch-pad-menu>
+      </div>
     </div>
 
-    <!-- Touch Pad -->
+    <!-- 👇 Desktop-only Touch Pad at the bottom -->
-    <div class="border-top p-2 bg-white">
+    <div *ngIf="!isTabletView" class="border-top p-2 bg-white">
       <app-touch-pad-menu></app-touch-pad-menu>
     </div>
 

src/app/home/home.component.ts

@@ -1,13 +1,43 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
-import { NavbarComponent } from '../components/navbar/navbar.component';
 import { SidebarComponent } from '../components/sidebar/sidebar.component';
-import { TouchPadMenuComponent } from '../components/touch-pad-menu/touch-pad-menu.component';
+import { NavbarComponent } from '../components/navbar/navbar.component';
 import { MiddleSectionComponent } from '../components/middle-section/middle-section.component';
+import { TouchPadMenuComponent } from '../components/touch-pad-menu/touch-pad-menu.component';
+import { CommonModule } from '@angular/common';
+
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [NavbarComponent, SidebarComponent, TouchPadMenuComponent, MiddleSectionComponent], // ✅ Add here
+  imports: [
+    CommonModule,
+    SidebarComponent,
+    NavbarComponent,
+    MiddleSectionComponent,
+    TouchPadMenuComponent,
+  ],
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  styleUrls: ['./home.component.css'],
 })
-export class HomeComponent {}
+export class HomeComponent implements OnInit, OnDestroy {
+  isTabletView = false;
+  private resizeObserver!: () => void;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.updateView();
+    this.resizeObserver = () => {
+      this.updateView();
+      this.cdr.detectChanges();
+    };
+    window.addEventListener('resize', this.resizeObserver);
+  }
+
+  ngOnDestroy() {
+    window.removeEventListener('resize', this.resizeObserver);
+  }
+
+  private updateView() {
+    this.isTabletView = window.innerWidth <= 800;
+  }
+}