Fix Search Bar location

project/frontend-angular/src/app/grade-teacher/grade-teacher.css

@@ -53,7 +53,7 @@
 
 .search-input {
     width: 100%;
-    padding: 12px 16px;
+    padding: 12px 0 12px 10px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
@@ -174,126 +174,126 @@
 }
 
 .table-section {
-background: rgba(255, 255, 255, 0.02);
-border: 1px solid rgba(255, 255, 255, 0.1);
-border-radius: 16px;
-overflow: hidden;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    overflow: hidden;
 }
 
 .grades-table {
-width: 100%;
-border-collapse: collapse;
+    width: 100%;
+    border-collapse: collapse;
 }
 
 .table-header {
-background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 .table-header th {
-padding: 16px 20px;
-text-align: left;
-font-size: 14px;
-font-weight: 600;
-color: #ffffff;
-border-bottom: 2px solid #333;
+    padding: 16px 20px;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    border-bottom: 2px solid #333;
 }
 
 .sort-button {
-background: none;
-border: none;
-color: #e0e0e0;
-cursor: pointer;
-margin-left: 8px;
-font-size: 16px;
-transition: all 0.3s ease;
+    background: none;
+    border: none;
+    color: #e0e0e0;
+    cursor: pointer;
+    margin-left: 8px;
+    font-size: 16px;
+    transition: all 0.3s ease;
 }
 
 .sort-button:hover {
-color: #ffffff;
-transform: scale(1.1);
+    color: #ffffff;
+    transform: scale(1.1);
 }
 
 .table-row {
-transition: all 0.3s ease;
+    transition: all 0.3s ease;
 }
 
 .table-row:hover {
-background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .table-row.even-row {
-background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.02);
 }
 
 .table-row.even-row:hover {
-background: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.08);
 }
 
 .table-cell {
-padding: 16px 20px;
-font-size: 14px;
-color: #e0e0e0;
-border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 16px 20px;
+    font-size: 14px;
+    color: #e0e0e0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .grade-container {
-display: flex;
-flex-wrap: wrap;
-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
 }
 
 .grade-item {
-display: flex;
-align-items: center;
-gap: 8px;
-background: rgba(255, 255, 255, 0.05);
-border: 1px solid rgba(255, 255, 255, 0.1);
-border-radius: 8px;
-padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 8px 12px;
 }
 
 .grade-value {
-font-family: 'Courier New', monospace;
-font-weight: 600;
-color: #ffffff;
+    font-family: 'Courier New', monospace;
+    font-weight: 600;
+    color: #ffffff;
 }
 
 .grade-edit-select {
-padding: 4px 8px;
-background: rgba(255, 255, 255, 0.1);
-border: 1px solid rgba(255, 255, 255, 0.2);
-border-radius: 4px;
-color: #ffffff;
-font-size: 12px;
-font-family: 'Courier New', monospace;
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    color: #ffffff;
+    font-size: 12px;
+    font-family: 'Courier New', monospace;
 }
 
 .grade-edit-select option {
-background: #2a2a2a;
+    background: #2a2a2a;
 }
 
 .action-button {
-background: rgba(255, 255, 255, 0.1);
-color: #e0e0e0;
-border: 1px solid rgba(255, 255, 255, 0.1);
-padding: 4px 8px;
-border-radius: 4px;
-font-size: 12px;
-cursor: pointer;
-transition: all 0.3s ease;
-font-family: inherit;
+    background: rgba(255, 255, 255, 0.1);
+    color: #e0e0e0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: inherit;
 }
 
 .action-button:hover {
-background: rgba(255, 255, 255, 0.15);
-color: #ffffff;
-transform: translateY(-1px);
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    transform: translateY(-1px);
 }
 
 .action-button.save {
-background: linear-gradient(135deg, #8C231E 0%, #a52a24 100%);
-color: #ffffff;
-border-color: #8C231E;
+    background: linear-gradient(135deg, #8C231E 0%, #a52a24 100%);
+    color: #ffffff;
+    border-color: #8C231E;
 }
 
 .action-button.save:hover {