Fixes #4328 - Display of date picker overlay is cut off.

app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js

@@ -21,14 +21,16 @@
  * ========================================================= */
 
  /*
-	Zammad Edits:
-		- fix todayBtn toggle of display none and block: toggleClass instead
-		- allow custom template as options parameter
-		- fix that place method doesn't think that the container is the window, but rather the real window is the window
-		- added rerender method to show correct today if task is longer open the 24 hours
-		- scroll into view
-		- fix vertical auto position
-		- disableScroll flag to
+  Zammad Edits:
+    - fix todayBtn toggle of display none and block: toggleClass instead
+    - allow custom template as options parameter
+    - fix that place method doesn't think that the container is the window, but rather the real window is the window
+    - added rerender method to show correct today if task is longer open the 24 hours
+    - scroll into view
+    - fix vertical auto position
+    - disableScroll flag to
+    - adjust all cells with colspan when the week number is visible
+    - shorten weekdays from three to two characters: Mon -> Mo
  */
 
 (function(factory){
@@ -143,7 +145,7 @@
 		this.viewMode = this.o.startView;
 
 		if (this.o.calendarWeeks)
-			this.picker.find('tfoot .today, tfoot .clear')
+			this.picker.find('[colspan]')
 						.attr('colspan', function(i, val){
 							return parseInt(val) + 1;
 						});
@@ -856,14 +858,10 @@
 			var dowCnt = this.o.weekStart,
 				html = '<tr>';
 			if (this.o.calendarWeeks){
-				this.picker.find('.datepicker-days .datepicker-switch')
-					.attr('colspan', function(i, val){
-						return parseInt(val) + 1;
-					});
 				html += '<th class="cw">&#160;</th>';
 			}
 			while (dowCnt < this.o.weekStart + 7){
-				html += '<th class="dow">'+dates[this.o.language].daysMin[(dowCnt++)%7]+'</th>';
+				html += '<th class="dow">'+dates[this.o.language].daysMin[(dowCnt++)%7].substr(0, 2)+'</th>';
 			}
 			html += '</tr>';
 			this.picker.find('.datepicker-days thead').append(html);

app/assets/stylesheets/zammad.scss

@@ -11397,7 +11397,7 @@ output {
 
   th {
     background: none;
-    font-weight: bold;
+    font-weight: 500;
   }
 
   th,
@@ -11427,14 +11427,29 @@ output {
   .dow {
     text-transform: uppercase;
     font-size: 12px;
-    padding: 5px 5px 0;
+    padding: 0;
     text-align: center;
     vertical-align: inherit;
   }
 
-  .day {
+  td.cw {
+    // background: 1px gap on the right towards the days + 1px border
+    background: linear-gradient(
+      to right,
+      var(--background-modifier-lighter),
+      var(--background-modifier-lighter) calc(100% - 2px),
+      transparent calc(100% - 2px),
+      var(--background-modifier-accent) calc(100% - 1px),
+      transparent calc(100% - 1px)
+    );
+    padding: 0 5px 0 3px !important;
+    text-align: center;
+    border-radius: 0;
+  }
+
+  tbody td {
     width: 27px;
-    height: 26px;
+    height: 27px;
     border-radius: 14px;
     padding: 1px 0 0 !important;
     background-color: inherit;
@@ -11453,7 +11468,6 @@ output {
   .month,
   .year {
     text-align: center;
-    font-size: 15px;
 
     &:not(.disabled) {
       @extend %clickable;