feat: Updated styling into seperate css files

frontend/src/components/AdminGroupModal.vue

@@ -78,7 +78,7 @@ const hydrateForm = () => {
     form.value = {
         name: props.group?.name || "",
         description: props.group?.description || "",
-        permissionsText: (props.group?.permissions || []).join("\n"),
+        permissionsText: (props.group?.permissions || []).join("/n"),
     };
 };
 
@@ -93,33 +93,7 @@ const handleSubmit = () => {
 };
 </script>
 
-<style scoped>
-.admin-modal {
-    z-index: 2000;
-    overflow-y: auto;
-    padding-top: max(0.5rem, env(safe-area-inset-top));
-}
+<style scoped src="../assets/styles/scoped/components/AdminGroupModal.css"></style>
 
-.admin-modal-backdrop {
-    z-index: 1990;
-}
 
-.admin-modal .modal-dialog {
-    margin: 1rem auto;
-}
 
-.permissions-textarea {
-    font-family: "Courier New", monospace;
-}
-
-@media (max-width: 767.98px) {
-    .admin-modal {
-        padding-top: max(0.75rem, env(safe-area-inset-top));
-    }
-
-    .admin-modal .modal-dialog {
-        margin: 0.75rem;
-        max-width: none;
-    }
-}
-</style>