fixes: lists with floating images, headings in BlockText (#649)

* preliminary fixes, but still some adjustments needed

* finalizing alignment of lists and floating media in student project steps, adding headings to blocktext story

packages/common/src/scss/components/_BlockText.scss

@@ -26,7 +26,9 @@
   h5,
   h6 {
     @apply mt-10 lg:mt-18 mb-5;
-
+    &:first-child {
+      @apply mt-0;
+    }
     &:last-child {
       @apply mb-0;
     }
@@ -55,7 +57,13 @@
 
   ol,
   ul {
-    @apply mb-5 relative left-14 pr-14;
+    @apply mb-5 relative left-14 -ml-8 pr-14;
+    @screen sm {
+      @apply left-9;
+      li {
+        @apply w-full ml-8;
+      }
+    }
 
     @screen lg {
       @apply mb-8;
@@ -105,10 +113,10 @@
     }
     &.left,
     &.right {
-      @apply mt-[.25rem] mb-5 lg:mb-5 mx-5 lg:mx-8;
-      @apply inline max-w-full sm:max-w-[50%];
+      @apply mt-[.25rem] mb-5 lg:mb-5 sm:mx-5 lg:mx-8;
+      @apply block max-w-full sm:max-w-[50%];
       img {
-        @apply max-w-full  h-auto;
+        @apply max-w-full h-auto;
       }
     }
     &.left {
@@ -120,6 +128,11 @@
       @apply sm:float-right mr-0;
       // mimics offset in BlockInlineImage
       @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem];
+      // prevents list items trom overlapping right-floating images
+      img,
+      .richtext-caption {
+        @apply sm:pl-6;
+      }
     }
     &:last-child {
       @apply mb-0;

packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -208,16 +208,16 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       p,
       li {
         @screen lg {
-          @apply mr-[10rem];
+          @apply pr-[9rem];
         }
         @screen xl {
-          @apply mr-[14rem];
+          @apply pr-[13rem];
         }
       }
       table {
         p,
         li {
-          @apply mr-0;
+          @apply pr-0;
         }
       }
     }