.positions-manager { padding: 1rem; font-family: sans-serif; } .positions-manager .form-group { margin-bottom: 0; } .positions-manager .form-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #ddd; } @media (max-width: 768px) { .positions-manager .form-container { grid-template-columns: minmax(100%, 1fr); } } .positions-manager .form-container .button-wrapper { align-self: flex-end; /* Align button container at the bottom */ } .positions-manager .form-container [class*="tt-input"], .positions-manager .form-container [class*="tt-checkbox"] { flex: 1 1 200px; /* Flexible width with a minimum of 200px */ min-width: 200px; } .positions-manager .form-container .btn { align-self: flex-end; /* Align button at the bottom of the form area */ } .positions-manager table { width: 100%; margin-top: 1rem; border-collapse: collapse; } .positions-manager table thead th { background-color: #f4f4f4; border-bottom: 2px solid #ddd; padding: 8px; text-align: left; } .positions-manager table th, .positions-manager table td { padding: 8px; vertical-align: middle; /* Vertically center text */ } .positions-manager table tbody tr:nth-child(even) { background-color: #f9f9f9; /* Alternate row color */ } .positions-manager table .btn { margin-right: 0.5rem; } .positions-manager .form-container .btn-sm, .positions-manager table .btn.btn-sm { padding: 0.3rem 0.6rem; /* Small button padding */ font-size: 0.875rem; }