Layout updates: md->lg, removing min-height and most overflow-scroll

Author: kotl

src/app/app.component.html

@@ -14,7 +14,7 @@
  limitations under the License.
 -->
 <div class="site-layout h-screen overflow-scroll">
-  <div class="w-full py-4 flex flex-col md:px-12 lg:px-2 mb-8">
+  <div class="w-full py-4 flex flex-col lg:px-12 lg:px-2 mb-8">
     <!-- Icon and Title Section -->
     <div class="flex items-center p-8 pl-[10%] justify-start">
       <img
@@ -28,11 +28,11 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
     </div>
 
     <div
-      class="w-[85%] flex flex-col md:flex-row md:gap-6 justify-between items-center mx-auto min-h-[600px] md:min-h-[600px]"
+      class="w-full p-4 flex flex-col lg:items-start lg:flex-row lg:gap-6 justify-between items-center mx-auto"
     >
       <!-- Task Generation -->
       <div
-        class="w-full md:w-2/5 p-4 bg-[#fff] transition-all duration-300 ease-in-out rounded-[40px] relative m-2 flex flex-col"
+        class="w-full lg:w-2/5 p-4 bg-[#fff] transition-all duration-300 ease-in-out rounded-[40px] relative m-2 flex flex-col"
       >
         <div class="flex-grow flex flex-col justify-between overflow-scroll">
           <div>
@@ -54,7 +54,7 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
 
             <!-- Prompt Input Section -->
             <form>
-              <div class="w-full flex justify-between gap-4 mb-4 p-4">
+              <div class="w-full flex flex-col justify-between gap-4 mb-4 p-4 lg:flex-row xl:flex-row">
                 <mat-form-field class="w-11/12 mb-8" appearance="outline">
                   <mat-label>Add a prompt</mat-label>
                   <textarea
@@ -100,7 +100,7 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
           </div>
 
           <!-- Generated Task Section -->
-          <div class="flex-grow min-h-[150px] md:min-h-[216px] pb-4">
+          <div class="flex-grow pb-4">
             @if (isLoading()) {
             <mat-spinner></mat-spinner>
             } @else if (generatedTask) {
@@ -142,15 +142,15 @@ <h1 class="text-3xl" style="font-family: 'Helvetica Neue', sans-serif">
       <!-- Task Grid -->
       @if (this.tasks.length > 0) {
       <div
-        class="w-full md:w-3/5 p-4 bg-[#fff] transition-all duration-300 ease-in-out rounded-[40px] relative overflow-scroll my-2 flex flex-col"
+        class="w-full lg:w-3/5 p-4 bg-[#fff] transition-all duration-300 ease-in-out rounded-[40px] relative overflow-scroll my-2 flex flex-col"
       >
         <div
-          class="flex-grow w-full grid grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-6 bg-[#fff] rounded-[40px] p-4 min-h-[90%] overflow-y-scroll"
+          class="flex-grow w-full grid grid-cols-1 lg:grid-cols-1 xl:grid-cols-2 gap-6 bg-[#fff] rounded-[40px] p-4"
         >
           @for (task of this.tasks; track task.maintask.id) {
           <app-task
             [task]="task"
-            class="h-auto min-h-[216px] overflow-scroll"
+            class="h-auto"
             (onDelete)="deleteCurrentMainAndSubTasks($event)"
             (onTasksCompletedToggle)="onTasksCompleted($event)"
           ></app-task>

tailwind.config.js

@@ -26,7 +26,7 @@ module.exports = {
     },
     screens: {
       'xs': '480px', 
-      'sm': '740px',
+      'sm': '640px',
       'md': '868px',
       'lg': '1024px', 
       'xl': '1280px',