Prevent date overflow.

src/css/main.css

@@ -535,20 +535,21 @@ body {
       color: #fff;
       float: left;
       font-size: 9pt;
-      letter-spacing: 1px;
-      width: 30%; }
+      letter-spacing: 1px; }
     .right-col .login-panel-main .bottom .left, .right-col .login-panel-switcher .bottom .left {
-      font-weight: bold; }
+      font-weight: bold;
+      width: 30%; }
       .right-col .login-panel-main .bottom .left:hover, .right-col .login-panel-switcher .bottom .left:hover {
         cursor: pointer; }
     .right-col .login-panel-main .bottom .right, .right-col .login-panel-switcher .bottom .right {
       position: relative;
       top: 40px;
-      right: -245px;
+      right: -190px;
       font-style: italic;
       text-align: right;
       transition: all 1s;
-      opacity: 0; }
+      opacity: 0;
+      width: 40%; }
       .right-col .login-panel-main .bottom .right.loaded, .right-col .login-panel-switcher .bottom .right.loaded {
         opacity: 1; }
       .right-col .login-panel-main .bottom .right em, .right-col .login-panel-switcher .bottom .right em {

src/js/LoginPanel.js

@@ -596,7 +596,7 @@ define(['exports', 'src/dist/js/inferno.min', 'src/dist/js/inferno-component.min
       value: function generateSessionDropdown() {
         var _this7 = this;
 
-        // Sort by active, then alphabetical.
+        // Sort by active, then alphabetical. 
         // Doing this requires using sort in reverse.
         var rows = window.lightdm.sessions.sort(function (a, b) {
           return a.name.toUpperCase() > b.name.toUpperCase();
@@ -642,8 +642,8 @@ define(['exports', 'src/dist/js/inferno.min', 'src/dist/js/inferno-component.min
     }, {
       key: 'render',
       value: function render() {
-        // Do as I say, not as I do.
-        // Having to generate this many sections is a strong indicator that they should be sub-components instead,
+        // Do as I say, not as I do. 
+        // Having to generate this many sections is a strong indicator that they should be sub-components instead, 
         // but they are remaining here for good reason. As a login screen, fewer dependencies to load is preferable to readability.
         var loginPanelClasses = ['login-panel-main'];
         var dateClasses = ["right", "date"];

src/js/UserSwitcher.js

@@ -423,7 +423,7 @@ define(['exports', 'src/dist/js/inferno.min', 'src/dist/js/inferno-component.min
           }))), bp4([bp5(user.display_name), bp6(user.real_name)])]);
         });
 
-        // Very hacky. Add an extra copy of the last element to the beginning of the list
+        // Very hacky. Add an extra copy of the last element to the beginning of the list 
         // if the first element in the list is currently selected.
         if (activeIndex === 0) {
           var user = window.lightdm.users[window.lightdm.users.length - 1];
@@ -434,7 +434,7 @@ define(['exports', 'src/dist/js/inferno.min', 'src/dist/js/inferno-component.min
           }))), bp11([bp12(user.display_name), bp13(user.real_name)])]));
         }
 
-        // Very hacky. Add an extra copy of the first element to the end of the list
+        // Very hacky. Add an extra copy of the first element to the end of the list 
         // if the last element in the list is currently selected.
         if (activeIndex === window.lightdm.users.length - 1) {
           var _user = window.lightdm.users[0];

src/sass/main.sass

@@ -542,10 +542,9 @@ body
       font-size: 9pt
       letter-spacing: 1px
 
-      width: 30%
-
     .left
       font-weight: bold
+      width: 30%
 
       @extend .noselect
 
@@ -555,13 +554,14 @@ body
     .right
       position: relative
       top: 40px
-      right: -245px
+      right: -190px
 
       font-style: italic
       text-align: right
       transition: all 1s
 
       opacity: 0
+      width: 40%
 
       @extend .noselect