Merge pull request Sofie-Automation#1399 from nrkno/feat/shelf-tabs-narrower/sofie-3849

feat: shelf tabs are narrower (sofie-3849)

Author: jstarpl

meteor/client/styles/shelf/shelf.scss

@@ -128,33 +128,61 @@
 		}
 
 		.rundown-view__shelf__tabs__tab {
+			position: relative;
 			display: block;
 			background: none;
 			border: none;
-			position: relative;
 			flex: 1 1;
 			max-width: 7em;
-			min-width: 13em;
+			min-width: min-content;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			text-align: center;
-			color: #8f8f8f;
 			line-height: $inspector-shelf-tabs-height;
 			cursor: pointer;
 			user-select: none;
+			padding-inline: 1.5em;
 
 			outline-offset: -5px;
 
+			// this is a setup that ensures that the min-content is calculated with this font-weight,
+			// while we display the button with differing font-weights depending on state
+			font-weight: 500;
+			color: transparent;
+
 			&:hover {
-				color: #fff;
-				transition: 0.3s;
+				// color: #fff;
+				// transition: 0.3s;
+
+				> .rundown-view__shelf__tabs__tab-label {
+					color: #fff;
+					transition: 0.3s;
+				}
+			}
+
+			> .rundown-view__shelf__tabs__tab-label {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				line-height: inherit;
+				font-weight: 300;
+				color: #b0b0b0;
 			}
 
 			&.selected {
-				color: #fff;
-				font-weight: 500;
-				text-shadow: 0 0 5px #000;
+				// color: #fff;
+				// font-weight: 500;
+				// text-shadow: 0 0 5px #000;
+				// transition: 0s;
+
+				> .rundown-view__shelf__tabs__tab-label {
+					color: #fff;
+					font-weight: 500;
+					text-shadow: 0 0 5px #000;
+					transition: 0s;
+				}
 
 				&::after {
 					content: ' ';

meteor/client/ui/Shelf/ShelfRundownLayout.tsx

@@ -52,6 +52,7 @@ export function ShelfRundownLayout(props: Readonly<IShelfRundownLayoutProps>): J
 								tabIndex={0}
 								role="tab"
 							>
+								<div className="rundown-view__shelf__tabs__tab-label">{t('AdLib')}</div>
 								{t('AdLib')}
 							</button>
 							<button
@@ -62,6 +63,7 @@ export function ShelfRundownLayout(props: Readonly<IShelfRundownLayoutProps>): J
 								tabIndex={0}
 								role="tab"
 							>
+								<div className="rundown-view__shelf__tabs__tab-label">{t('Global AdLib')}</div>
 								{t('Global AdLib')}
 							</button>
 						</>
@@ -79,21 +81,23 @@ export function ShelfRundownLayout(props: Readonly<IShelfRundownLayoutProps>): J
 									tabIndex={0}
 									role="tab"
 								>
+									<div className="rundown-view__shelf__tabs__tab-label">{panel.name}</div>
 									{panel.name}
 								</button>
 							))
 					)}
+					<button
+						className={ClassNames('rundown-view__shelf__tabs__tab', {
+							selected: (props.selectedTab || SHELF_DEFAULT_TAB) === ShelfTabs.SYSTEM_HOTKEYS,
+						})}
+						onClick={() => onSwitchTab(ShelfTabs.SYSTEM_HOTKEYS)}
+						tabIndex={0}
+						role="tab"
+					>
+						<div className="rundown-view__shelf__tabs__tab-label">{t('Shortcuts')}</div>
+						{t('Shortcuts')}
+					</button>
 				</OverflowingContainer>
-				<button
-					className={ClassNames('rundown-view__shelf__tabs__tab', {
-						selected: (props.selectedTab || SHELF_DEFAULT_TAB) === ShelfTabs.SYSTEM_HOTKEYS,
-					})}
-					onClick={() => onSwitchTab(ShelfTabs.SYSTEM_HOTKEYS)}
-					tabIndex={0}
-					role="tab"
-				>
-					{t('Shortcuts')}
-				</button>
 			</div>
 			<div className="rundown-view__shelf__panel super-dark" role="tabpanel">
 				{!rundownLayout ? (