Achieve horizontal-card layout via css

aleksis/apps/alsijil/static/css/alsijil/lesson.css

@@ -15,12 +15,68 @@
 }
 
 
-@media only screen and (max-width : 992px) {
-    table.responsive-table.alsijil-table th,
-    table.responsive-table.alsijil-table td {
-      margin: 0;
-      vertical-align: top;
-      height: 109px;}
+@media only screen and (max-width: 992px) {
+    .no-mobile-card {
+        border: unset;
+        padding: unset;
+        margin: unset;
+        box-shadow: unset;
+    }
+    .no-mobile-card .card-content {
+        padding: unset;
+    }
+    table.alsijil-table.horizontal-on-small {
+        display: block;
+        max-width: calc(100vw - 40px);
+    }
+    table.alsijil-table.horizontal-on-small thead {
+        display: none;
+    }
+    table.alsijil-table.horizontal-on-small tbody {
+        overflow-x: scroll;
+        display: flex;
+        column-gap: 1rem;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        scroll-snap-type: x proximity;
+    }
+
+    table.alsijil-table.horizontal-on-small tr {
+        flex-basis: min(75vw, 400px);
+        flex-shrink: 0;
+        flex-grow: 1;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        scroll-snap-align: center;
+        transition: all .5s;
+        margin: 0.5rem 0 1rem 0;
+        background-color: #fff!important;
+    	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+        padding: 24px;
+    }
+    table.alsijil-table.horizontal-on-small tr:first-of-type {
+        margin-inline-start: .4rem;
+        -moz-margin-start: .4rem;
+        -webkit-margin-start: .4rem;
+    }
+
+    table.alsijil-table.horizontal-on-small tr:last-of-type {
+        margin-inline-end: .4rem;
+        -moz-margin-end: .4rem;
+        -webkit-margin-end: .4rem;
+    }
+    table.alsijil-table.horizontal-on-small td.center-align {
+        text-align: left;
+    }
+    table.alsijil-table.horizontal-on-small .person-name {
+        font-size: 24px;
+        font-weight: 300;
+        display: block;
+        line-height: 32px;
+        margin-bottom: 8px;
+    }
 }
 
 .alsijil-time-head, .alsijil-object-head {

aleksis/apps/alsijil/templates/alsijil/partials/lesson/tabs/notes.html

@@ -16,13 +16,13 @@
   {% form form=personal_note_formset.management_form %}{% endform %}
 {% endif %}
 
-<div class="card hide-on-med-and-down">
+<div class="card no-mobile-card">
   <div class="card-content">
     <span class="card-title">
       {% blocktrans %}Personal notes{% endblocktrans %}
     </span>
 
-    <table class="striped alsijil-table">
+    <table class="striped alsijil-table horizontal-on-small">
       <thead>
       <tr>
         <th>{% blocktrans %}Person{% endblocktrans %}</th>
@@ -39,7 +39,7 @@
         {% if can_edit_register_object_personalnote %}
           <tr>
             {{ form.id }}
-            <td>{{ form.person_name }}{{ form.person_name.value }}
+            <td class="person-name">{{ form.person_name }}{{ form.person_name.value }}
               <p>
                 {% for assignment in form.instance.person.group_roles.all %}
                   {% include "alsijil/group_role/chip.html" with role=assignment.role %}
@@ -49,7 +49,7 @@
             <td class="center-align">
               <label>
                 {{ form.absent }}
-                <span></span>
+                <span><span class="hide-on-large-only">{{ form.absent.label }}</span></span>
               </label>
             </td>
             <td>
@@ -63,7 +63,7 @@
             <td class="center-align">
               <label>
                 {{ form.excused }}
-                <span></span>
+                <span><span class="hide-on-large-only">{{ form.absent.label }}</span></span>
               </label>
             </td>
             <td>