bro now the each section is aligned & below that the info is also well appropriate but see it's not getting opening proper due to both side it should open well appropriate it's not get squeeze what i'm saying bro your' getting naah so please fix it please bro  TaskAssign.component.scss .task-assign-container {
    padding: 20px;
  
    h1, h2 {
      font-family: 'Poppins', sans-serif;
    }
  
    .employee-list, .task-assign {
      margin-top: 20px;
  
      table {
        width: 100%;
        border-collapse: collapse;
  
        th, td {
          padding: 10px;
          border: 1px solid #ccc;
        }
  
        .online {
          color: green;
        }
  
        .offline {
          color: red;
        }
      }
    }
  
    .form-group {
      margin-bottom: 20px;
  
      label {
        display: block;
        margin-bottom: 5px;
      }
  
      select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
      }
    }
    select, input, button {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
    }
    .popup {
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 20px;
      position: absolute;
      width: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
    }
  }
  
    .map-container {
      width: 100%;
      height: 400px;
      margin-top: 20px;
    }
  

  .employee-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .employee-details {
    flex: 1; /* Adjusts the width as needed */
    text-align: left;
  }
  
  .employee-status {
    flex: 0.5;
    text-align: right;
  }.task-assign-container {
    padding: 20px;
  
    h1, h2 {
      font-family: 'Poppins', sans-serif;
    }
  
    .employee-list, .task-assign {
      margin-top: 20px;
  
      table {
        width: 100%;
        border-collapse: collapse;
  
        th, td {
          padding: 10px;
          border: 1px solid #ccc;
        }
  
        .online {
          color: green;
        }
  
        .offline {
          color: red;
        }
      }
    }
  
    .form-group {
      margin-bottom: 20px;
  
      label {
        display: block;
        margin-bottom: 5px;
      }
  
      select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
      }
    }
  
    .map-container {
      width: 100%;
      height: 400px;
      margin-top: 20px;
    }
  }

  .employee-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .employee-details {
    flex: 1; /* Adjusts the width as needed */
    text-align: left;
  }
  
  .employee-status {
    flex: 0.5;
    text-align: right;
  }
  
  
  .task-assign-container h1 {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
  }
  
  .task-description {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
  }
  

  .auto-task-section {
    margin-top: 20px;
  
    label {
      display: block;
      margin: 10px 0 5px;
      font-weight: bold;
    }
  
    select, .assign-btn {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
    }
  
    .assign-btn {
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: bold;
    }
  }
  

  .manual-task-section {
    margin-top: 30px;
  
    input, select, .manual-assign-btn {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
    }
  
    .manual-assign-btn {
      background-color: #28a745;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: bold;
    }
  }
  

  .task-overview-section {
    margin-top: 40px;
  }
  
  .task-table {
    width: 100%;
    border-collapse: collapse;
    
    th, td {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: center;
    }
  
    .status-assigned {
      color: green;
    }
  
    .status-pending {
      color: red;
    }
  }
  

  .task-summary-footer {
    margin-top: 30px;
    text-align: center;
  
    .task-summary {
      font-size: 18px;
      margin-bottom: 20px;
    }
  
    .confirm-btn {
      background-color: #ffc107;
      color: black;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      font-weight: bold;
    }
  }
  
  .success {
  color: green;
}
.error {
  color: red;
}
.success {
  color: green;
}
.error {
  color: red;
}


.task-assign-container {
  padding: 20px;

  h1, h2 {
    font-family: 'Poppins', sans-serif;
  }

  .auto-task-section, .manual-task-section {
    margin-top: 20px;

    label {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

    select, input, button {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
    }

    .assign-btn {
      background-color: #007bff;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
  width: 600px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.popup-content h2 {
  margin-bottom: 20px;
}

.popup-content table {
  width: 100%;
  margin-bottom: 20px;
}

.popup-content button {
  margin-right: 10px;
}
}

.popup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.popup-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 90vw;
  overflow-x: auto; // Allow horizontal scrolling for smaller screens
}

table {
  width: 100%;
  border-collapse: collapse;

  th, td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    word-wrap: break-word;
  }

  th {
    background-color: #f9f9f9;
    font-weight: bold;
  }

  td ul {
    padding-left: 15px;
    list-style-type: disc;
  }

  // Responsiveness for mobile devices
  @media (max-width: 768px) {
    th, td {
      font-size: 12px;
      padding: 5px;
    }
  }
}

 TaskAssign.component.html <div class="task-assign-container">
  <h1>Task Assignment Panel</h1>

  <!-- Employee Lists -->
  <div class="list-section">
    <div class="employee-list">
      <h2>Employee List</h2>
      <table>
        <thead>
          <tr>
            <th>Phone Number</th>
            <th>Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let employee of employees">
            <td>{{ employee.phoneNumber }}</td>
            <td>{{ employee.firstName }} {{ employee.lastName }}</td>
            <td
              [ngClass]="{
                online: employee.isOnline,
                offline: !employee.isOnline
              }"
            >
              {{ employee.isOnline ? "Online" : "Offline" }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="task-assign-container">
    <h1>Task Management & Assignment</h1>
    <p class="task-description">
      Manage tasks efficiently by using auto-assignment or manually assigning
      tasks to employees based on zones and shifts.
    </p>

    <!-- Auto Task Assignment Section -->
    <div class="auto-task-section">
      <h2>Auto Task Assignment</h2>

      <!-- Employee Selection Dropdown -->
      <!-- Employee Selection Dropdown -->
      <label for="employee-select">Select Employee:</label>
      <select
        id="employee-select"
        [(ngModel)]="selectedEmployee"
        (change)="fetchEmployeeDetails(selectedEmployee)"
        name="selectedEmployee"
      >
        <option
          *ngFor="let employee of employees"
          [value]="employee.phoneNumber"
        >
          {{ employee.firstName }} {{ employee.lastName }} -
          {{ employee.phoneNumber }}
        </option>
      </select>

      <!-- Area Selection Dropdown -->
      <label for="area-select">Select Area:</label>
      <select
        id="area-select"
        [(ngModel)]="selectedArea"
        name="selectedArea"
        disabled
      >
        <option *ngFor="let area of areas" [value]="area">{{ area }}</option>
      </select>

      <!-- Work Shift Selection Dropdown -->
      <label for="shift-select">Select Work Shift:</label>
      <select
        id="shift-select"
        [(ngModel)]="workShift"
        name="workShift"
        disabled
      >
        <option
          value="Full Time Monthly"
          [selected]="workShift === 'Full Time Monthly'"
        >
          Full-Time
        </option>
        <option
          value="Part Time Monthly"
          [selected]="workShift === 'Part Time Monthly'"
        >
          Part-Time
        </option>
      </select>

      <!-- Auto-Assign Task Button -->
      <button
        (click)="openAutoAssignPopup()"
        [disabled]="!selectedEmployee || !selectedArea || !workShift"
      >
        Auto Assign Tasks
      </button>

      <!-- Pop-up for Task Assignments -->
      <p *ngIf="showAutoAssignPopup">Pop-up status: Visible</p>
      <div *ngIf="showAutoAssignPopup" class="popup-container">
        <div class="popup-content">
          <h2>Available Bookings</h2>
          <table>
            <thead>
              <tr>
                <th>Vehicle Type</th>
                <th>Vehicle Quantity</th>
                <th>Additional VehicleQuantities</th>
                <th>BookingDate & Time</th>
                <th>CurrentLocation</th>
                <th>Selected Date</th>
                <th>Selected Time</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let booking of bookings">
                <td>{{ booking.vehicleType }}</td>
                <td>{{ booking.vehicleQuantity }}</td>
                <td>
                  <ul>
                    <li *ngFor="let key of getObjectKeys(booking.additionalVehicleQuantities)">
                      {{ key }}: {{ booking.additionalVehicleQuantities[key] }}
                    </li>
                  </ul>
                </td>
                <td>{{ booking.bookingDateTime }}</td>
                <td>{{ booking.currentLocation }}</td>
                <td>{{ booking.selectedDate | date : "shortDate" }}</td>
                <td>{{ booking.selectedTime }}</td>
                <!-- <td>{{ booking.selectedTime | time :"shortTime"  }}</td> -->
               
                <td>
                  <input type="checkbox" [(ngModel)]="booking.selected" />
                </td>
              </tr>
            </tbody>
          </table>
          <button (click)="confirmAutoAssignTasks()">
            Assign Selected Tasks
          </button>
          <button (click)="closeAutoAssignPopup()">Close</button>
        </div>
      </div>
      <!-- Status Message -->
      <div
        *ngIf="statusMessage"
        [ngClass]="{ error: isError, success: !isError }"
      >
        {{ statusMessage }}
      </div>

      <!-- Loading Indicator -->
      <div *ngIf="isLoading">Loading...</div>

      <div class="task-overview">
        <h3>Assigned Tasks</h3>
        <ul>
          <li *ngFor="let task of assignedTasks">
            Task: {{ task.description }} - Status: {{ task.status }}
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Manual Task Assignment Form -->
  <div class="manual-task-section">
    <h3>Manual Task Assignment</h3>

    <label for="employer-id">Employer ID:</label>
    <input
      id="employer-id"
      type="text"
      [(ngModel)]="employerId"
      placeholder="Enter Employer ID"
      required
    />

    <label for="phone-number">Employee Phone Number:</label>
    <input
      id="phone-number"
      type="text"
      [(ngModel)]="employeePhoneNumber"
      placeholder="Enter Phone Number"
      required
    />

    <label for="zone-select">Select Work Zone:</label>
    <select id="zone-select" [(ngModel)]="selectedZone">
      <option *ngFor="let zone of zones" [value]="zone">{{ zone }}</option>
    </select>

    <button class="manual-assign-btn" (click)="manualAssignTask()">
      Assign Task
    </button>
  </div>

  <div class="task-overview-section">
    <h3>Assigned Tasks Overview</h3>

    <table class="task-table">
      <thead>
        <tr>
          <th>Employee</th>
          <th>Task</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let task of assignedTasks">
          <td>{{ task.employeePhoneNumber }}</td>
          <td>{{ task.taskDescription }}</td>
          <td>
            <span
              [ngClass]="{
                'status-assigned': task.status === 'assigned',
                'status-pending': task.status === 'pending'
              }"
            >
              {{ task.status }}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Zone Selection for Task Assignment -->
  <form (ngSubmit)="manualAssignTask()">
    <label for="zone">Select Work Zone:</label>
    <select id="zone" [(ngModel)]="selectedZone" name="selectedZone"></select>
    <button type="submit">Assign Tasks Based on Zone</button>
  </form>

  <div class="task-summary-footer">
    <div class="task-summary">
      <p>Pending Tasks: {{ pendingTasksCount }}</p>
    </div>
  </div>

  <!-- Display Assigned Tasks -->
  <div class="assigned-tasks">
    <h3>Assigned Tasks</h3>
    <ul>
      <li *ngFor="let task of assignedTasks">
        Task ID: {{ task.taskId }}, Employee: {{ task.employeePhoneNumber }},
        Status: {{ task.status }}
      </li>
    </ul>
  </div>
</div>
 so please bro help me