CSS updates to make long lesson titles look better

schoolyourself/schoolyourself_review.py

@@ -131,7 +131,7 @@ class SchoolYourselfReviewXBlock(SchoolYourselfXBlock):
               <schoolyourself_review
                   base_url="https://schoolyourself.org"
                   module_id="algebra/multiplication"
-                  module_title="Multiplication"
+                  module_title="Multiplication, multiplication, multiplication"
                   shared_key="test"
               />
             </vertical_demo>

schoolyourself/static/css/student_view.css

@@ -35,6 +35,7 @@
   text-align: center;
   background: #fff;
 
+  float: left;
   width: 256px;
   height: 192px;
   display: inline-block;
@@ -66,7 +67,7 @@
   text-align: left;
   vertical-align: top;
   padding-left: 40px;
-  display: inline-block;
+  overflow: hidden;
 }
 
 .schoolyourself-lesson-title,
@@ -74,11 +75,11 @@
 .schoolyourself-lesson-title a:visited {
   text-transform: uppercase;
   font-size: 24px;
-  margin-bottom: 10px;
   font-weight: 300;
   color: #6eb535;
   text-decoration: none;
   margin-bottom: 0 !important;
+  margin-top: 0;
 }
 .schoolyourself-lesson-block:hover .schoolyourself-lesson-title {
   color: #6eb535;
@@ -90,20 +91,22 @@
   color: #737c95;
   font-size: 21px;
   margin-bottom: 5px;
-  height: 44px;
   max-width: 320px;
 }
 
 .schoolyourself-review-mastery {
-  position: absolute;
-  bottom: 0;
+  margin-top: 20px;
+  height: 44px;
   color: #737c95;
   font-size: 16px;
   margin-bottom: 5px;
-  height: 44px;
   max-width: 320px;
 }
 
+.schoolyourself-review-mastery-text {
+  height: 24px;
+}
+
 .schoolyourself-review-mastery-bar {
   width: 320px;
   background: #ddd;