fix: lessons menu on small screens

user/themes/textbook/css/custom.css

@@ -130,6 +130,12 @@ iframe.geogebra {
 /*    padding-right: 4em;*/
 /*}*/
 
+/*@media (max-width: 840px) {*/
+/*    #header .navbar-section {*/
+/*        margin-right: 0;*/
+/*    }*/
+/*}*/
+
 /** Mobile navigation without javascript ******************************************************************************/
 /** We're using the checkbox hack. **/
 
@@ -290,17 +296,17 @@ iframe.geogebra {
 
 
 .dropdown-selector {
+    display: inline-block;
     float: right;
     position: relative;
     top: 50%;
     vertical-align: middle;
+    margin: 0 1rem !important;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
-    margin: 0 1rem !important;
-    display: inline-block;
 }
 
 .dropdown-selector > .btn:first-child {
@@ -320,8 +326,7 @@ iframe.geogebra {
     cursor: pointer;
     user-select: none;
     background-image: none;
-    border: 1px solid transparent;
-    /* size */
+    /* Size */
     padding: 5px 10px;
     font-size: 0.8rem;
     line-height: 1.5;
@@ -329,16 +334,16 @@ iframe.geogebra {
     /* Aspect */
     color: #333;
     background-color: #fff;
-    border-color: #ccc;
+    border: 1px solid #ccc;
 }
 
 .dropdown-selector .dropdown-menu {
     position: absolute;
     top: 95%;
-    /*left: 0;*/
-    right: 0;
+    right: -2.0rem;
+    max-width: 90vw;
     z-index: 1000;
-    display: none;
+    display: none; /* shown by hover or focus on elder sibling btn */
     float: left;
     padding: 5px 0;
     margin: 2px 0 0;
@@ -348,9 +353,15 @@ iframe.geogebra {
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 4px;
-    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 }
 
+/*@media screen and (max-width: 400px) {*/
+/*    .dropdown-selector .dropdown-menu {*/
+/*        max-width: 320px;*/
+/*    }*/
+/*}*/
+
 .dropdown-selector .dropdown-menu img {
     width: 24px;
     height: 12px;
@@ -359,9 +370,10 @@ iframe.geogebra {
 
 .dropdown-selector .dropdown-menu li {
     line-height: 1rem;
-    font-color: #c0c0c0;
+    /*text-color: #c0c0c0;*/
     display: list-item;
     text-align: -webkit-match-parent;
+    overflow: hidden;
 }
 
 .dropdown-selector .dropdown-menu li:hover {
@@ -371,11 +383,17 @@ iframe.geogebra {
 .dropdown-selector .dropdown-menu > li > a {
     display: block;
     padding: 3px 15px;
-    clear: both;
+    /*clear: both;*/
     font-weight: 400;
     line-height: 1.42857143;
-    color: #333;
+    /*color: #333;*/
     white-space: nowrap;
+
+    /*overflow: hidden;*/
+
+    /* hmmmm ; why not?    not working    needs more testing */
+    /*text-overflow: ellipsis;*/
+    /*-ms-text-overflow: ellipsis;*/
 }
 
 /**********************************************************************************************************************/