Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/TimeboundCourseConfigRaster.vue

 <script setup>
 import PositiveSmallIntegerField from "aleksis.core/components/generic/forms/PositiveSmallIntegerField.vue";
 import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
+import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue";
 import ValidityRangeField from "./ValidityRangeField.vue";
 </script>
 
@@ -15,38 +16,63 @@ import ValidityRangeField from "./ValidityRangeField.vue";
       :items="tableItems"
     >
       <template #top>
-        <v-toolbar flat>
-          <validity-range-field
-            solo
-            rounded
-            hide-details
-            v-model="internalValidityRange"
-            :loading="$apollo.queries.currentValidityRange.loading"
-          />
-          <v-divider class="mx-4" inset vertical></v-divider>
-          <v-spacer></v-spacer>
-          <v-autocomplete
-            rounded
-            solo
-            multiple
-            :items="groups"
-            item-text="shortName"
-            item-value="id"
-            return-object
-            :disabled="$apollo.queries.groups.loading"
-            :label="$t('lesrooster.timebound_course_config.groups')"
-            v-model="selectedGroups"
-            class="mt-8"
-          />
-          <v-spacer></v-spacer>
-          <v-divider class="mx-4" inset vertical></v-divider>
-          <save-button
-            :disabled="
-              !editedCourseConfigs.length && !createdCourseConfigs.length
-            "
-            @click="save"
-          />
-        </v-toolbar>
+        <v-row>
+          <v-col cols="6" lg="3" class="d-flex justify-space-between flex-wrap align-center">
+            <v-autocomplete
+              outlined
+              filled
+              multiple
+              hide-details
+              label="Select Group"
+              :items="groups"
+              item-text="shortName"
+              item-value="id"
+              return-object
+              :disabled="$apollo.queries.groups.loading"
+              :label="$t('lesrooster.timebound_course_config.groups')"
+              :loading="$apollo.queries.groups.loading"
+              v-model="selectedGroups"
+              class="mr-4"
+            />
+          </v-col>
+          
+          <v-col cols="6" lg="3" class="d-flex justify-space-between flex-wrap align-center">
+            <validity-range-field
+              outlined
+              filled
+              label="Select Validity Range"
+              hide-details
+              v-model="internalValidityRange"
+              :loading="$apollo.queries.currentValidityRange.loading"
+            />
+          </v-col>
+
+          <v-spacer/>
+
+          <v-col
+            cols="8"
+            lg="3"
+            class="d-flex justify-space-between flex-wrap align-center"
+          >
+            <secondary-action-button
+              i18n-key="actions.copy_last_configuration"
+              block
+              class="mr-4"
+            />
+          </v-col>
+          <v-col
+            cols="4"
+            lg="1"
+            class="d-flex justify-space-between flex-wrap align-center"
+          >
+            <save-button
+              :disabled="
+                !editedCourseConfigs.length && !createdCourseConfigs.length
+              "
+              @click="save"
+            />
+          </v-col>
+        </v-row>
       </template>
 
       <!-- eslint-disable-next-line vue/valid-v-slot -->
@@ -313,7 +339,7 @@ export default {
     headers() {
       let groupHeadersWithWidth = this.groupHeaders.map((header) => ({
         ...header,
-        width: `${95 / this.groupHeaders.length}%`,
+        width: `${Math.max(95 / this.groupHeaders.length, 15)}%`,
       }));
       return [
         {