OSD Windows: Use the monitor work-area to place windows on screen

Was using the entire monitor size to place this. Use the monitors available
work area instead. This will ensure the OSD's are placed the same distance
above the panel regardless of the panel size.

data/theme/cinnamon-sass/widgets/_osd.scss

@@ -12,7 +12,7 @@ $ws_dot_inactive: $ws_indicator_height / 6;
   @extend %osd_base;
   @extend %title_4;
 
-  margin-bottom: 4em;
+  margin-bottom: 1em;
   border-radius: 9999px;
   font-weight: bold;
   spacing: $base_padding * 2;
@@ -59,7 +59,7 @@ $ws_dot_inactive: $ws_indicator_height / 6;
   @extend %title_4;
 
   min-width: 140px;
-  margin-bottom: 4em;
+  margin-bottom: 1em;
   border-radius: 9999px;
   font-weight: bold;
   padding: $base_padding * 2 $base_padding * 6 0 $base_padding * 6;

js/ui/osdWindow.js

@@ -42,7 +42,10 @@ class OsdWindow extends Clutter.Actor {
         });
 
         this._monitorIndex = monitorIndex;
-        let constraint = new Layout.MonitorConstraint({ index: monitorIndex });
+        let constraint = new Layout.MonitorConstraint({
+            index: monitorIndex,
+            work_area: true,
+        });
         this.add_constraint(constraint);
 
         this._hbox = new St.BoxLayout({

js/ui/workspaceOsd.js

@@ -27,7 +27,10 @@ class WorkspaceOsd extends Clutter.Actor {
 
         this.set_offscreen_redirect(Clutter.OffscreenRedirect.ALWAYS);
 
-        let constraint = new Layout.MonitorConstraint({ index: monitorIndex });
+        let constraint = new Layout.MonitorConstraint({
+            index: monitorIndex,
+            work_area: true,
+        });
         this.add_constraint(constraint);
 
         Main.uiGroup.add_actor(this);