Adjust styles for smaller screens

frontend/src/views/coordinator/Students.tsx

@@ -57,15 +57,18 @@ const Students = () => {
 
   return (
     <div>
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-col gap-3 md:flex-row md:gap-0">
         <div>
           <button
-            className="btn btn-success"
+            className="btn btn-success btn-xs md:btn-md"
             onClick={() => navigate('/coordinator/add-student')}
           >
             Dodaj nowego studenta
           </button>
-          <label className="ml-4 btn btn-success btn-outline" htmlFor="file">
+          <label
+            className="ml-4 btn btn-success btn-xs md:btn-md btn-outline"
+            htmlFor="file"
+          >
             Importuj
           </label>
           <input
@@ -78,16 +81,18 @@ const Students = () => {
           />
         </div>
         <div className="flex">
-          <select className="select select-bordered mr-3">
+          <select className="select select-xs md:select-md select-bordered mr-3">
             {perPageOptions.map(({ value, label }) => (
-              <option onClick={() => setPerPage(value)}>{label}</option>
+              <option key={value} onClick={() => setPerPage(value)}>
+                {label}
+              </option>
             ))}
           </select>
           <label className="label">
-            <span className="mr-2">Tylko niezapisani</span>
+            <span className="mr-2 text-xs md:text-base">Tylko niezapisani</span>
             <input
               type="checkbox"
-              className="checkbox"
+              className="checkbox checkbox-xs md:checkbox-md"
               onChange={() => setShowGroupless(!showGroupless)}
             />
           </label>