This avoids horizontal scrollbars when they were not needed.

app/assets/stylesheets/layout/_work_package.sass

@@ -234,6 +234,9 @@
     .form--field-container
       max-width: 400px
 
+.work-package-table--container
+  table.generic-table
+    width: calc(100% - 10px)
 
 %flex-grow-shrink-zero
   flex-grow: 0

frontend/app/ui_components/interactive-table-directive.js

@@ -44,7 +44,11 @@ module.exports = function($timeout, $window){
       }
 
       function getOuterContainer() {
-        return element.parent('.generic-table--container');
+        return element.closest('.generic-table--container');
+      }
+
+      function isWorkPackagesTable () {
+        return element.closest('.work-package-table--container').length !== 0;
       }
 
       function getBackgrounds() {
@@ -76,7 +80,12 @@ module.exports = function($timeout, $window){
         } else {
           // ensure table stretches to container sizes
           getInnerContainer().css('width', '100%');
-          getBackgrounds().css('width', '100%');
+          if(isWorkPackagesTable()) {
+            getBackgrounds().css('width', 'calc(100% - 10px)');
+          }
+          else {
+            getBackgrounds().css('width', '100%');
+          }
         }
       }