quick fixes

celestiaorg · Jul 14, 2023 · c7bba0e · c7bba0e
1 parent a53aeb2
commit c7bba0e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 52 deletions.
diff --git a/src/components/sections/agenda.js b/src/components/sections/agenda.js
@@ -184,23 +184,27 @@ function TabList({ agendaData, activeTab, activeDay, toggleTabs }) {
 			>
 				<div className='stage-card-arrow' />
 				<div className='stage-card-container'>
-					<div className='tabe-title'>Galois Stage</div>
-					<div className='flex flex-wrap'>
-						{activeDay === "Day1"
-							? getThemes("day1", "stage1").map((theme) => {
-									return (
-										<div className='tab-tags' style={{ backgroundColor: theme.color }}>
-											{theme.id}
-										</div>
-									);
-							  })
-							: getThemes("day2", "stage1").map((theme) => {
-									return (
-										<div className='tab-tags' style={{ backgroundColor: theme.color }}>
-											{theme.id}
-										</div>
-									);
-							  })}
+					<div className='basis-1/3 sm:basis-1/2 lg:basis-auto'>
+						<div className='tabe-title'>Galois Stage</div>
+					</div>
+					<div className='basis-2/3 sm:basis-1/2 lg:basis-auto'>
+						<div className='flex flex-wrap'>
+							{activeDay === "Day1"
+								? getThemes("day1", "stage1").map((theme) => {
+										return (
+											<div className='tab-tags' style={{ backgroundColor: theme.color }}>
+												{theme.id}
+											</div>
+										);
+								  })
+								: getThemes("day2", "stage1").map((theme) => {
+										return (
+											<div className='tab-tags' style={{ backgroundColor: theme.color }}>
+												{theme.id}
+											</div>
+										);
+								  })}
+						</div>
 					</div>
 				</div>
 			</button>
@@ -210,47 +214,55 @@ function TabList({ agendaData, activeTab, activeDay, toggleTabs }) {
 			>
 				<div className='stage-card-arrow' />
 				<div className='stage-card-container'>
-					<div className='tabe-title'>Fourier Stage</div>
-					<div className='flex flex-wrap'>
-						{activeDay === "Day1"
-							? getThemes("day1", "stage2").map((theme) => {
-									return (
-										<div className='tab-tags' style={{ backgroundColor: theme.color }}>
-											{theme.id}
-										</div>
-									);
-							  })
-							: getThemes("day2", "stage2").map((theme) => {
-									return (
-										<div className='tab-tags' style={{ backgroundColor: theme.color }}>
-											{theme.id}
-										</div>
-									);
-							  })}
+					<div className='basis-1/3 sm:basis-1/2 lg:basis-auto'>
+						<div className='tabe-title'>Fourier Stage</div>
+					</div>
+					<div className='basis-2/3 sm:basis-1/2 lg:basis-auto'>
+						<div className='flex flex-wrap'>
+							{activeDay === "Day1"
+								? getThemes("day1", "stage2").map((theme) => {
+										return (
+											<div className='tab-tags' style={{ backgroundColor: theme.color }}>
+												{theme.id}
+											</div>
+										);
+								  })
+								: getThemes("day2", "stage2").map((theme) => {
+										return (
+											<div className='tab-tags' style={{ backgroundColor: theme.color }}>
+												{theme.id}
+											</div>
+										);
+								  })}
+						</div>
 					</div>
 				</div>
 			</button>
 
 			<button className={`stage-card ${activeTab === "Tab3" && "selected"}`} onClick={() => toggleTabs("Tab3")}>
 				<div className='stage-card-arrow' />
 				<div className='stage-card-container'>
-					<div className='tabe-title'>Cauchy Stage</div>
-					<div className='flex flex-wrap'>
-						{activeDay === "Day1"
-							? getThemes("day1", "stage3").map((theme) => {
-									return (
-										<div className='tab-tags' style={{ backgroundColor: theme.color }}>
-											{theme.id}
-										</div>
-									);
-							  })
-							: getThemes("day2", "stage3").map((theme) => {
-									return (
-										<div className='tab-tags' style={{ backgroundColor: theme.color }}>
-											{theme.id}
-										</div>
-									);
-							  })}
+					<div className='basis-1/3 sm:basis-1/2 lg:basis-auto'>
+						<div className='tabe-title'>Cauchy Stage</div>
+					</div>
+					<div className='basis-2/3 sm:basis-1/2 lg:basis-auto'>
+						<div className='flex flex-wrap'>
+							{activeDay === "Day1"
+								? getThemes("day1", "stage3").map((theme) => {
+										return (
+											<div className='tab-tags' style={{ backgroundColor: theme.color }}>
+												{theme.id}
+											</div>
+										);
+								  })
+								: getThemes("day2", "stage3").map((theme) => {
+										return (
+											<div className='tab-tags' style={{ backgroundColor: theme.color }}>
+												{theme.id}
+											</div>
+										);
+								  })}
+						</div>
 					</div>
 				</div>
 			</button>

diff --git a/src/components/sections/agenda.scss b/src/components/sections/agenda.scss
@@ -191,9 +191,11 @@
 		text-transform: uppercase;
 		border-radius: 5px;
 		padding: 8px 10px;
-		margin-right: 6px;
+		margin-right: 3px;
+		margin-top: 3px;
 		@media (min-width: $md) {
 			margin-top: 8px;
+			margin-right: 6px;
 		}
 	}