Improve css tags, and make sure messages wrap correctly.

db/mobile.php

@@ -36,7 +36,7 @@ $addons = [
                 'method' => 'mobile_view_activity',
                 'styles' => [
                     'url' => '/mod/attendance/mobilestyles.css',
-                    'version' => 19
+                    'version' => 21
                 ]
             ]
         ],

mobilestyles.css

@@ -1,20 +1,26 @@
-.attendance_teacher_form .item-radio {
+.attendance_mobile_teacher_form .item-radio {
     display: inline-block;
     margin-top: 10px;
     margin-left: 5px;
     padding: 0;
     width: 70px;
 }
-.attendance_teacher_form .item-inner {
+.attendance_mobile_teacher_form .item-inner {
     padding: 0;
 }
-.attendance_teacher_form .radiolabel .item-inner {
+.attendance_mobile_teacher_form .radiolabel .item-inner {
     text-align: center;
 }
-.attendance_teacher_form .item-inner .input-wrapper label,
+.attendance_mobile_teacher_form .item-inner .input-wrapper label,
-.attendance_teacher_form .radio {
+.attendance_mobile_teacher_form .radio {
     margin: 0;
 }
-.attendance_teacher_form .radio .radio-icon {
+.attendance_mobile_teacher_form .radio .radio-icon {
     display: none;
 }
+
+.attendance_mobile_teacher_form .messages .label,
+.attendance_mobile_user_form .messages .label,
+.attendance_mobile_view_page .messages .label {
+    white-space: normal;
+}

templates/mobile_teacher_form.mustache

@@ -45,7 +45,7 @@
     }
 }}
 {{=<% %>=}}
-<div class="attendance_teacher_form">
+<div class="attendance_mobile_teacher_form">
     <span class="description">
     <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
     </span>

templates/mobile_user_form.mustache

@@ -44,13 +44,15 @@
     }
 }}
 {{=<% %>=}}
-<div>
+<div class="attendance_mobile_user_form">
     <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
     <%#showmessage%>
         <%#messages%>
+            <span class="messages">
                 <ion-item>
                     {{ 'plugin.mod_attendance.<% string %>' | translate }}
                 </ion-item>
+            </span>
         <%/messages%>
     <%/showmessage%>
     <%#showpassword%>

templates/mobile_view_page.mustache

@@ -48,13 +48,15 @@
     }
 }}
 {{=<% %>=}}
-<div>
+<div class="attendance_mobile_view_page">
     <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
     <%#showmessage%>
     <%#messages%>
+    <span class="messages">
         <ion-item>
             {{ 'plugin.mod_attendance.<% string %>' | translate }}
         </ion-item>
+    </span>
     <%/messages%>
     <%/showmessage%>
     <%#sessions%>