chore: css tweaks

explodingcamera · explodingcamera · commit ca2e05f6da3e · 2026-03-27T23:11:11.000+01:00
Signed-off-by: Henry &lt;mail@henrygressmann.de&gt;
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -27,7 +27,7 @@ hex={version="0.4"}
 bs58="0.5"
 serde={version="1.0", features=["derive"]}
 serde_json={version="1.0"}
-md-5={version="0.11.0-rc.5"}
+md-5={version= "0.11.0" }
 async-compression={version="0.4", default-features=false, features=["gzip", "tokio"]}
 tokio-tar={package="astral-tokio-tar", version="0.6"}
 blake3={version="1.8"}
diff --git a/data/licenses-cargo.json b/data/licenses-cargo.json
diff --git a/data/licenses-npm.json b/data/licenses-npm.json
diff --git a/web/bun.lock b/web/bun.lock
diff --git a/web/package.json b/web/package.json
@@ -52,7 +52,7 @@
 		"@types/react-dom": "^19.2.3",
 		"@types/topojson-client": "^3.1.5",
 		"@types/topojson-specification": "^1.0.5",
-		"astro": "6.1.0",
+		"astro": "6.1.1",
 		"babel-plugin-react-compiler": "^1.0.0",
 		"rollup-plugin-license": "^3.7.0",
 		"typescript": "^6.0.2"
diff --git a/web/src/api/constants.ts b/web/src/api/constants.ts
@@ -10,9 +10,9 @@ export const metricNames: Record<Metric, string> = {
 export const dimensionNames: Record<Dimension, string> = {
 	platform: "Platform",
 	browser: "Browser",
-	url: "URL",
-	url_entry: "Entry",
-	url_exit: "Exit",
+	url: "Page",
+	url_entry: "Entry Page",
+	url_exit: "Exit Page",
 	path: "Path",
 	mobile: "Device Type",
 	referrer: "Referrer",
diff --git a/web/src/components/card.module.css b/web/src/components/card.module.css
@@ -47,7 +47,7 @@ button.card {
   z-index: 0;
 
   margin: 0;
-  padding: 0.6rem 0.5rem 0.4rem 0.6rem;
+  padding: 0.5rem 0.6rem 0.3rem 0.6rem;
 
   transition: background-color 0.2s ease;
   border-radius: var(--pico-border-radius);
diff --git a/web/src/components/dialog.module.css b/web/src/components/dialog.module.css
@@ -51,13 +51,13 @@
 .close {
   position: fixed;
   z-index: 1000;
-  background-color: white;
+  background-color: var(--pico-dropdown-color);
   border: none;
   right: 0;
   top: 0;
-  margin: 1rem;
+  margin: 0.5rem;
   pointer-events: auto;
-  border-radius: 1rem;
+  border-radius: 3rem;
   display: flex;
   width: 2.5rem;
   height: 2.5rem;
diff --git a/web/src/components/dimensions/dimensions.module.css b/web/src/components/dimensions/dimensions.module.css
@@ -17,9 +17,8 @@
       cursor: pointer;
       margin-right: auto;
       outline: none;
-      padding-bottom: 0.2rem;
-      padding-left: 0.2rem;
       box-shadow: none !important;
+      font-weight: 600;
     }
   }
 
@@ -42,34 +41,6 @@
     margin-right: auto;
   }
 
-  .tabsList .pageTabGroup {
-    display: flex;
-    align-items: center;
-    gap: 0.1rem;
-
-    > :first-child {
-      margin-right: 0.1rem;
-    }
-
-    > :not(:first-child) {
-      font-size: 0.8rem;
-      padding: 0.1rem 0.1rem;
-      margin-top: 0.15rem;
-
-      &button {
-        font-weight: 800;
-      }
-
-      &:not([aria-selected="true"]) {
-        opacity: 0.6;
-      }
-    }
-
-    > :last-child {
-      margin-right: 0.5rem;
-    }
-  }
-
   .tabsContent {
     display: flex;
     flex-direction: column;
diff --git a/web/src/components/dimensions/index.tsx b/web/src/components/dimensions/index.tsx
@@ -53,28 +53,46 @@ export const PageDimensionTabsCard = ({
 	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
 }) => {
 	const showSessionPageDimensions = query.metric === "views" || query.metric === "unique_visitors";
-	const dimensions: Dimension[] = showSessionPageDimensions
-		? ["url", "url_entry", "url_exit", "fqdn"]
-		: ["url", "fqdn"];
+
+	if (showSessionPageDimensions) {
+		return (
+			<DimensionDropdownCard dimensions={["url", "url_entry", "url_exit", "fqdn"]} query={query} onSelect={onSelect} />
+		);
+	} else {
+		return <DimensionCard dimension="url" query={query} onSelect={(value) => onSelect(value, "url")} />;
+	}
+};
+
+export const DimensionDropdownCard = ({
+	dimensions,
+	query,
+	onSelect,
+}: {
+	dimensions: Dimension[];
+	query: ProjectQuery;
+	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
+}) => {
+	const [selectedDimension, setSelectedDimension] = useState(dimensions[0]);
 
 	return (
 		<article className={styles.card}>
 			<Tabs.Root
 				className={styles.tabs}
-				defaultValue="url"
-				key={showSessionPageDimensions ? "session-pages" : "basic-pages"}
+				value={selectedDimension}
+				onValueChange={(value) => setSelectedDimension(value as Dimension)}
 			>
 				<Tabs.List className={styles.tabsList}>
-					<div className={styles.pageTabGroup}>
-						<Tabs.Tab value="url">URL</Tabs.Tab>
-						{showSessionPageDimensions && (
-							<>
-								<Tabs.Tab value="url_entry">Entry</Tabs.Tab>
-								<Tabs.Tab value="url_exit">Exit</Tabs.Tab>
-							</>
-						)}
-					</div>
-					<Tabs.Tab value="fqdn">Domain</Tabs.Tab>
+					<select
+						className={styles.dimensionSelect}
+						value={selectedDimension}
+						onChange={(e) => setSelectedDimension(e.target.value as Dimension)}
+					>
+						{dimensions.map((dimension) => (
+							<option key={dimension} value={dimension}>
+								{dimensionNames[dimension]}
+							</option>
+						))}
+					</select>
 					<div>{metricNames[query.metric]}</div>
 				</Tabs.List>
 				{dimensions.map((dimension) => (
@@ -87,62 +105,6 @@ export const PageDimensionTabsCard = ({
 	);
 };
 
-export const DimensionDropdownCard = ({
-	dimensions,
-	query,
-	onSelect,
-}: {
-	dimensions: Dimension[];
-	query: ProjectQuery;
-	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
-}) => {
-	return (
-		<article className={styles.card}>
-			<DimensionDropdown dimensions={dimensions} query={query} onSelect={onSelect} />
-		</article>
-	);
-};
-
-export const DimensionDropdown = ({
-	dimensions,
-	query,
-	onSelect,
-}: {
-	dimensions: Dimension[];
-	query: ProjectQuery;
-	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
-}) => {
-	const [selectedDimension, setSelectedDimension] = useState(dimensions[0]);
-
-	return (
-		<Tabs.Root
-			className={styles.tabs}
-			value={selectedDimension}
-			onValueChange={(value) => setSelectedDimension(value as Dimension)}
-		>
-			<Tabs.List className={styles.tabsList}>
-				<select
-					className={styles.dimensionSelect}
-					value={selectedDimension}
-					onChange={(e) => setSelectedDimension(e.target.value as Dimension)}
-				>
-					{dimensions.map((dimension) => (
-						<option key={dimension} value={dimension}>
-							{dimensionNames[dimension]}
-						</option>
-					))}
-				</select>
-				<div>{metricNames[query.metric]}</div>
-			</Tabs.List>
-			{dimensions.map((dimension) => (
-				<Tabs.Panel key={dimension} value={dimension} className={styles.tabsContent}>
-					<DimensionTable dimension={dimension} query={query} onSelect={(value) => onSelect(value, dimension)} />
-				</Tabs.Panel>
-			))}
-		</Tabs.Root>
-	);
-};
-
 export const DimensionTabs = ({
 	dimensions,
 	query,
diff --git a/web/src/components/graph/graph.tsx b/web/src/components/graph/graph.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Tooltip } from "react-tooltip";
 import styles from "./graph.module.css";
 
 import { extent } from "d3-array";
@@ -84,30 +83,12 @@ export const LineGraph = ({ state, range }: { state: GraphState; range: DateRang
 				? scaleLinear([0, 1], [dimensions.height - paddingBottom - paddingTop, 0])
 				: scaleLinear([0, Math.max(maxY * 1.25 || 0, 20)], [dimensions.height - paddingBottom - paddingTop, 0]);
 
-		const bounceTolerance = 0.01;
-		const isExtremeBouncePoint = (d: DataPoint) =>
-			state.metric === "bounce_rate" && (d.y <= bounceTolerance || d.y >= 1 - bounceTolerance);
-		const isNormalPoint = (d: DataPoint) => !isExtremeBouncePoint(d);
-
 		const svgArea = area<DataPoint>()
-			.defined(isNormalPoint)
-			.x((d) => xAxis(d.x))
-			.y0(yAxis(0))
-			.y1((d) => yAxis(d.y));
-
-		const svgAreaFaded = area<DataPoint>()
-			.defined(() => state.metric === "bounce_rate")
 			.x((d) => xAxis(d.x))
 			.y0(yAxis(0))
 			.y1((d) => yAxis(d.y));
 
 		const svgLine = area<DataPoint>()
-			.defined(isNormalPoint)
-			.x((d) => xAxis(d.x))
-			.y((d) => yAxis(d.y));
-
-		const svgLineFaded = area<DataPoint>()
-			.defined(() => state.metric === "bounce_rate")
 			.x((d) => xAxis(d.x))
 			.y((d) => yAxis(d.y));
 
@@ -116,21 +97,11 @@ export const LineGraph = ({ state, range }: { state: GraphState; range: DateRang
 			.attr("transform", `translate(0, ${paddingTop})`)
 			.attr("d", svgArea(state.data) || "");
 
-		svg
-			.selectChild("#background-faded")
-			.attr("transform", `translate(0, ${paddingTop})`)
-			.attr("d", svgAreaFaded(state.data) || "");
-
 		svg
 			.selectChild("#line")
 			.attr("transform", `translate(0, ${paddingTop})`)
 			.attr("d", svgLine(state.data) || "");
 
-		svg
-			.selectChild("#line-faded")
-			.attr("transform", `translate(0, ${paddingTop})`)
-			.attr("d", svgLineFaded(state.data) || "");
-
 		const yAxisElement = svg.selectChild<SVGGElement>("#y-axis");
 		const xAxisElement = svg.selectChild<SVGGElement>("#x-axis");
 
@@ -287,15 +258,12 @@ export const LineGraph = ({ state, range }: { state: GraphState; range: DateRang
 				<title>Graph</title>
 				<defs>
 					<linearGradient id="graphGradient" x1="0" x2="0" y1="0" y2="1">
-						<stop offset="0%" stopColor="rgba(166, 206, 227, 0.4)" />
+						<stop offset="0%" stopColor="rgba(166, 206, 227, 0.25)" />
 						<stop offset="100%" stopColor="rgba(166, 206, 227, 0)" />
 					</linearGradient>
 				</defs>
 				<path id="background" fill="url(#graphGradient)" stroke="none" />
-				<path id="background-faded" fill="url(#graphGradient)" stroke="none" opacity="0.14" />
 				<path id="line" fill="none" stroke="#a6cee3" />
-				<path id="line-faded" fill="none" stroke="#a6cee3" opacity="0.15" />
-				{/* doted line */}
 				<path
 					id="needle"
 					fill="none"
@@ -308,24 +276,12 @@ export const LineGraph = ({ state, range }: { state: GraphState; range: DateRang
 						<h2>{state.title}</h2>
 						<h3>
 							<span className="date" /> <span className="value" />
-							{/* <span>{formatDate(new Date(data[data.length - 1].x), range.getTooltipRange())}</span>{" "}
-							{formatMetricVal(0, metric)} */}
 						</h3>
 					</div>
 				</foreignObject>
 				<g id="y-axis" />
 				<g id="x-axis" />
 			</svg>
-
-			<Tooltip id="map" className={styles.tooltipContainer} classNameArrow={styles.reset} disableStyleInjection>
-				{/* <div data-theme="dark" className={styles.tooltip}>
-                    <h2>{props.title}</h2>
-                    <h3>
-                        <span>{formatDate(new Date(point.x), props.range.getTooltipRange())}</span>{" "}
-                        {formatMetricVal(value, props.metric)}
-                    </h3>
-                </div> */}
-			</Tooltip>
 		</div>
 	);
 };
diff --git a/web/src/components/icons.tsx b/web/src/components/icons.tsx
@@ -107,5 +107,5 @@ export const Favicon = ({
 	if (config.isLoading || config.config?.disableFavicons) return <SearchIcon size={size} />;
 
 	fqdn = fqdn.replace(/[^a-zA-Z0-9.-]/g, "");
-	return <img src={`https://icons.duckduckgo.com/ip3/${fqdn}.ico`} alt="favicon" height={size} width={size} />;
+	return <img src={`https://icons.duckduckgo.com/ip3/${fqdn}.ico`} alt="" height={size} width={size} />;
 };
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro
@@ -58,7 +58,7 @@ const { title } = Astro.props;
   main,
   header {
     max-width: 60rem;
-    padding: 1rem 2rem;
+    padding: 1rem 1rem;
   }
 
   header {
