Hard-code width of calendar popup to 600px and fix ellipsis for events

We might want the width to be expressed in em or in % of the available
monitor width. Or perhaps a combination of all three. I don't know.

Signed-off-by: David Zeuthen <davidz@redhat.com>

data/theme/gnome-shell.css

@@ -674,6 +674,11 @@ StTooltip StLabel {
 
 /* Calendar popup */
 
+#calendarArea {
+    /* this is the width of the entire popup */
+    width: 600px;
+}
+
 .calendar-vertical-separator {
     -stipple-width: 1px;
     -stipple-color: #505050;
@@ -810,7 +815,6 @@ StTooltip StLabel {
 
 .events-header-vbox {
     spacing: 10px;
-    width: 300px;
 }
 
 .events-header {
@@ -854,7 +858,6 @@ StTooltip StLabel {
 }
 
 .events-event-box {
-    width: 200px;
 }
 
 .open-calendar {

js/ui/dateMenu.js

@@ -65,7 +65,7 @@ DateMenuButton.prototype = {
         this._clock = new St.Label();
         this.actor.set_child(this._clock);
 
-        hbox = new St.BoxLayout();
+        hbox = new St.BoxLayout({name: 'calendarArea'});
         this.menu.addActor(hbox);
 
         // Fill up the first column