fix: styling of course list menu

lms/public/css/style.css

@@ -2302,3 +2302,39 @@ select {
 	padding-right: 1rem !important;
 }
 
+.course-list-menu {
+	display: flex;
+	align-items: center;
+	float: right;
+}
+
+.course-list-buttons {
+	display: flex;
+}
+
+.course-list-buttons .btn {
+	margin-left: 0.5rem;
+}
+
+@media (max-width: 767px) {
+	.course-list-menu {
+		float: none;
+		margin-bottom: 1rem;
+	}
+}
+
+@media (max-width: 576px) {
+	.course-list-menu {
+		flex-direction: column;
+		align-items: unset;
+	}
+
+	.course-list-buttons {
+		margin-top: 1rem;
+		justify-content: space-between;
+	}
+
+	.course-list-buttons .btn {
+		margin-left: 0;
+	}
+}

lms/www/courses/index.html

@@ -24,7 +24,7 @@
 
             {% include "lms/templates/search_course/search_course.html" %}
 
-			<div class="flex align-center pull-right">
+			<div class="course-list-menu">
 
                 <select class="lms-menu" id="course-filter">
                     <option disabled value="">
@@ -41,21 +41,24 @@
                     </option>
                 </select>
 
-                {% if frappe.session.user != "Guest" %}
-                <a class="btn btn-default btn-sm ml-2" href="/users">
-                    {{ _("My Profile") }}
-                </a>
-                {% endif %}
+                <div class="course-list-buttons">
+                    {% if frappe.session.user != "Guest" %}
+                    <a class="btn btn-default btn-sm" href="/users">
+                        {{ _("My Profile") }}
+                    </a>
+                    {% endif %}
 
-                {% if show_creators_section %}
-                <a class="btn btn-default btn-sm ml-2" href="/courses/new-course/edit">
-                    {{ _("Create a Course") }}
-                </a>
-                {% endif %}
+                    {% if show_creators_section %}
+                    <a class="btn btn-default btn-sm" href="/courses/new-course/edit">
+                        {{ _("Create a Course") }}
+                    </a>
+                    {% endif %}
+
+                    <a class="btn btn-default btn-sm" id="open-search">
+                        {{ _("Search") }} (Ctrl + k)
+                    </a>
+                </div>
 
-				<a class="btn btn-default btn-sm ml-2" id="open-search">
-					{{ _("Search") }} (Ctrl + k)
-				</a>
             </div>
 
             <div class="page-title mb-6">