Fix for #526

Implementation idea stolen from http://jsfiddle.net/6K7t4/24/

includes/view/ShiftCalendarShiftRenderer.php

@@ -38,24 +38,25 @@ class ShiftCalendarShiftRenderer
 
         return [
             $blocks,
-            div(
-                'shift panel panel-' . $class . '" '
-                . 'style="height: '
+            div( 'shift-card "style="height: '
                 . ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN)
-                . 'px"',
-                [
-                    $this->renderShiftHead($shift, $class),
-                    div('panel-body', [
-                        $info_text,
-                        Room_name_render([
-                            'RID'  => $shift['RID'],
-                            'Name' => $shift['room_name']
-                        ])
-                    ]),
-                    $shifts_row,
-                    div('shift-spacer')
-                ]
-            )
+                . 'px;}"',
+                div(
+                    'shift panel panel-' . $class. '" style="position: absolute; width:99%;',
+                    [
+                        $this->renderShiftHead($shift, $class),
+                        div('panel-body', [
+                            $info_text,
+                            Room_name_render([
+                                'RID'  => $shift['RID'],
+                                'Name' => $shift['room_name']
+                            ])
+                        ]),
+                        $shifts_row,
+                        div('shift-spacer')
+                    ]
+                )
+            )        
         ];
     }
 

resources/assets/themes/base.less

@@ -189,10 +189,22 @@ table a > .icon-icon_angel {
     width: 50px;
     flex-shrink: 0;
   }
-
+  .shift-card {
+	  z-index:0;
+	  overflow:hidden;
+	  position:relative;
+  }
+  .shift-card:hover {
+	  overflow:visible;
+	  z-index:100;
+  }
+  .shift-card:hover .shift {
+  	 z-index:100;
+  }
   .shift {
     margin: 0 5px 5px 0;
-    overflow: hidden;
+    position: absolute;
+    width: 99%;
   }
 }