Make BaseLine spans more visible

Increase min-length to 3px, add margin around BaseLine
Fix non-visibility on startup

3 files changed, 13 insertions, 6 deletions

diff --git a/src/App.vue b/src/App.vue
index f0eb9bb..e50c980 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@
 			class="grow basis-full min-h-0 outline outline-1"
 			@remove="onTimelineRemove(idx)" @state-chg="onTimelineChg($event, idx)"
 			@event-req="onEventReq" @event-display="onEventDisplay($event, idx)"/>
-		<base-line :vert="vert" :timelines="timelines"/>
+		<base-line :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/>
 	</div>
 </div>
 </template>
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 0187b20..8730d90 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="flex relative" :class="{'flex-col': vert}"
-	:style="{color: store.color.text, backgroundColor: store.color.bgDark}" ref="rootRef">
+	:style="{color: store.color.text}" ref="rootRef">
 	<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
 	</div>
@@ -67,8 +67,10 @@ onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
 // Styles
 function periodStyles(period: Period){
 	return {
+		backgroundColor: store.color.bgDark2,
 		outline: '1px solid gray',
 		flexGrow: period.len,
+		overflow: 'hidden',
 	};
 }
 const labelStyles = computed((): Record<string, string> => ({
@@ -96,7 +98,10 @@ function spanStyles(state: TimelineState){
 	let lenFrac = (end.year - start.year) / (MAX_DATE.year - MIN_DATE.year);
 	let startPx = Math.max(0, availLen * startFrac); // Prevent negatives due to end-padding
 	let lenPx = Math.min(availLen - startPx, availLen * lenFrac);
-	lenPx = Math.max(1, lenPx); // Prevent zero length
+	if (lenPx < 3){ // Prevent zero length
+		lenPx = 3;
+		startPx -= Math.max(0, startPx + lenPx - availLen);
+	}
 	//
 	if (props.vert){
 		styles = {
@@ -118,7 +123,7 @@ function spanStyles(state: TimelineState){
 		transition: skipTransition.value ? 'none' : 'all 300ms ease-out',
 		color: 'black',
 		backgroundColor: store.color.alt,
-		opacity: 0.3,
+		opacity: 0.4,
 	};
 }
 </script>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 7d37ca8..413c163 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -172,6 +172,7 @@ function initScale(){ // Initialises to smallest usable scale
 			}
 		}
 	}
+	onStateChg();
 }
 function getYearlyScale(startDate: HistDate, endDate: HistDate, availLen: number){
 	// Get the smallest yearly scale that divides a date range, without making ticks too close
@@ -905,11 +906,12 @@ function onShiftWheel(evt: WheelEvent){
 }
 
 // For bound-change signalling
-watch(startDate, () => {
+function onStateChg(){
 	emit('state-chg', new TimelineState(
 		ID, startDate.value, endDate.value, startOffset.value, endOffset.value, scaleIdx.value
 	));
-});
+}
+watch(startDate, onStateChg);
 
 // For skipping transitions on startup (and on horz/vert swap)
 const skipTransition = ref(true);