fix: market comparison sizing

GODrums · Feb 25, 2025 · 0364acf · 0364acf
1 parent a6a068f
commit 0364acf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/src/background/messages/createNotification.ts b/src/background/messages/createNotification.ts
@@ -25,10 +25,24 @@ const handler: PlasmoMessaging.MessageHandler<CreateNotificationBody, CreateNoti
 	if (!isListenerActive) {
 		const granted = await chrome.permissions.contains({ permissions: ['notifications'] });
 		if (!granted) {
-			res.send({
-				success: false,
-			});
-			return;
+			let permission = false;
+			try {
+				permission = await chrome.permissions.request({ permissions: ['notifications'] });
+				if (!permission) {
+					res.send({
+						success: false,
+					});
+					return;
+				}
+			} catch (e) {
+				console.error(e);
+			}
+			if (!permission) {
+				res.send({
+					success: false,
+				});
+				return;
+			}
 		}
 		isListenerActive = true;
 		chrome.notifications.onClicked.addListener(onClickNotification);

diff --git a/src/lib/inline/CSFMarketComparison.tsx b/src/lib/inline/CSFMarketComparison.tsx
@@ -250,6 +250,10 @@ const CSFMarketComparison: React.FC = () => {
 			setListing(JSON.parse(betterfloatData));
 		}
 	};
+	useEffect(() => {
+		document.documentElement.style.height = '100%';
+		document.body.style.height = '100%';
+	}, []);
 
 	useEffect(() => {
 		if (user) {
@@ -283,7 +287,7 @@ const CSFMarketComparison: React.FC = () => {
 	const filteredMarketData = marketData.filter((entry) => visibleMarkets.includes(entry.market));
 
 	return (
-		<div className="dark w-[210px] max-h-[90vh]" style={{ fontFamily: 'Roboto, "Helvetica Neue", sans-serif' }}>
+		<div className="dark w-[210px] max-h-[60vh]" style={{ fontFamily: 'Roboto, "Helvetica Neue", sans-serif' }}>
 			{isLoading ? (
 				<div className="flex justify-center items-center mt-8">
 					<LoadingSpinner className="size-10 text-white" />
@@ -347,7 +351,7 @@ const CSFMarketComparison: React.FC = () => {
 							</div>
 						)}
 					</div>
-					<ScrollArea className="w-full h-[90vh] [--border:227_100%_88%_/_0.07]">
+					<ScrollArea className="w-full flex-1 [--border:227_100%_88%_/_0.07]" viewportClass="h-[825px]">
 						{listing && filteredMarketData.map((dataEntry) => <MarketCard key={dataEntry.market} listing={listing} entry={dataEntry} currency={currency} />)}
 						{filteredMarketData.length === 0 && (
 							<div className="text-[--subtext-color] mt-2 bg-[--highlight-background-minimal] rounded-md">

diff --git a/src/popup/ui/scroll-area.tsx b/src/popup/ui/scroll-area.tsx
@@ -4,9 +4,13 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as React from 'react';
 import { cn } from '~lib/utils';
 
-const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>>(({ className, children, ...props }, ref) => (
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+	viewportClass?: string;
+};
+
+const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(({ className, children, viewportClass, ...props }, ref) => (
 	<ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
-		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+		<ScrollAreaPrimitive.Viewport className={cn('h-full w-full rounded-[inherit]', viewportClass)}>{children}</ScrollAreaPrimitive.Viewport>
 		<ScrollBar />
 		<ScrollAreaPrimitive.Corner />
 	</ScrollAreaPrimitive.Root>