fix up calendar

main.ts

@@ -78,6 +78,9 @@ export default class StreamsPlugin extends Plugin {
 		styleEl.id = 'streams-calendar-styles';
 		document.head.appendChild(styleEl);
 
+		// Load CSS styles from styles.css
+		await this.loadStyles();
+
 		this.log.info('Streams plugin loaded');
 	}
 	
@@ -629,6 +632,33 @@ export default class StreamsPlugin extends Plugin {
 		this.log.debug("==========================");
 	}
 	
+	private loadStyles(): Promise<void> {
+		return new Promise((resolve, reject) => {
+			try {
+				this.log.debug("Loading styles from styles.css");
+				this.app.vault.adapter.readBinary(
+					`${this.app.vault.configDir}/plugins/streams/styles.css`
+				).then(data => {
+					// Convert ArrayBuffer to string
+					const decoder = new TextDecoder('utf-8');
+					const cssContent = decoder.decode(data);
+					
+					// Add styles
+					const styleEl = document.createElement('style');
+					styleEl.textContent = cssContent;
+					document.head.appendChild(styleEl);
+					resolve();
+				}).catch(error => {
+					this.log.error("Error reading styles.css:", error);
+					reject(error);
+				});
+			} catch (error) {
+				this.log.error("Error loading styles:", error);
+				reject(error);
+			}
+		});
+	}
+	
 	public toggleStreamCommand(stream: Stream) {
 		// Remove existing command first
 		this.removeStreamCommand(stream.id);

src/Widgets/CalendarWidget.ts

@@ -69,6 +69,13 @@ export class CalendarWidget {
         }
 
         contentContainer.style.position = 'relative';
+        
+        // I don't like these here, but moving them to styles.css caused breaks
+        this.widget.style.position = 'absolute';
+        this.widget.style.zIndex = '1000';
+        this.widget.style.top = '32px';
+        this.widget.style.right = '0';
+        
         contentContainer.appendChild(this.widget);
         
         this.fileModifyHandler = this.handleFileModify.bind(this);

styles.css

@@ -114,10 +114,11 @@
 .stream-calendar-widget {
     position: absolute;
     top: 32px;
-    right: 100%;
+    right: 0;
     z-index: 1000;
     font-size: 12px;
     margin-right: 8px;
+    pointer-events: auto;
 }
 
 /* Mobile-specific positioning for the calendar widget */
@@ -128,6 +129,7 @@
     z-index: 1000;
     font-size: 12px;
     margin-right: 0;
+    pointer-events: auto;
 }
 
 .is-phone .stream-calendar-widget {
@@ -155,6 +157,8 @@
     text-align: center;
     white-space: nowrap;
     user-select: none;
+    z-index: 1000;
+    pointer-events: auto;
 }
 
 .stream-calendar-expanded {
@@ -169,15 +173,45 @@
     opacity: 0;
     transform: scale(0.95);
     transition: all 0.3s ease;
+    z-index: 1005;
+    pointer-events: none;
 }
 
 .calendar-expanded {
     opacity: 1;
     transform: scale(1);
+    pointer-events: auto;
 }
 
 .stream-calendar-header {
     margin: 12px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.stream-calendar-nav {
+    cursor: pointer;
+    color: var(--text-muted);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.stream-calendar-nav:hover {
+    color: var(--text-normal);
+    background-color: var(--background-modifier-hover);
+    border-radius: 4px;
+}
+
+.stream-calendar-date {
+    font-weight: 600;
+    text-align: center;
+    flex: 1;
 }
 
 .calendar-day {
@@ -323,20 +357,6 @@
     border-left: 2px solid var(--stream-view-border-color, var(--text-success));
 }
 
-.stream-calendar-nav {
-    cursor: pointer;
-    color: var(--text-muted);
-    padding: 4px;
-}
-
-.stream-calendar-nav:hover {
-    color: var(--text-normal);
-}
-
-.stream-calendar-date {
-    font-weight: 600;
-}
-
 .today-button-expanded {
     opacity: 0;
 }