fix: handle subdomains & scroll for custom domain dialog (#889)

* only show A record if subdomain

* Update VerifyStep.tsx

* Update VerifyStep.tsx

* Update VerifyStep.tsx

* use tldts for domain extraction

* biome formatting

* style update

Author: ameer2468

apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/VerifyStep.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { Check, Copy } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import { parse } from "tldts";
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
 import type { DomainConfig, DomainVerification } from "./types";
 
@@ -54,6 +55,25 @@ const VerifyStep = ({
 		return [];
 	};
 
+	const isSubdomain = (raw: string): boolean => {
+		// Normalize and extract host (no scheme, path, port, or trailing dot)
+		const input =
+			raw
+				.trim()
+				.replace(/^https?:\/\//i, "")
+				.split("/")[0] ?? "";
+		if (!input) return false;
+		const host = (input.replace(/\.$/, "").split(":")[0] || "").toLowerCase();
+		try {
+			// Prefer PSL-backed parsing for correctness (e.g., co.uk, com.au)
+			const { subdomain } = parse(host);
+			return Boolean(subdomain);
+		} catch {
+			// Fallback: conservative heuristic
+			const parts = host.split(".");
+			return parts.length > 2;
+		}
+	};
 	const recommendedAValues = getRecommendedAValues();
 
 	// Check if DNS records are already correctly configured
@@ -63,8 +83,8 @@ const VerifyStep = ({
 	const cnameConfigured =
 		recommendedCnames.length > 0 &&
 		recommendedCnames.some((rec) => currentCnames.includes(rec.value));
-
-	const showARecord = recommendedARecord && !aRecordConfigured;
+	const showARecord =
+		recommendedAValues.length > 0 && !aRecordConfigured && !isSubdomain(domain);
 	const showCNAMERecord = hasRecommendedCNAME && !cnameConfigured;
 	const showTXTRecord = hasTXTVerification && !isVerified;
 
@@ -124,7 +144,7 @@ const VerifyStep = ({
 			) : (
 				!isVerified &&
 				domainConfig && (
-					<div className="space-y-4">
+					<div className="custom-scroll px-1 h-full max-h-[300px] space-y-4">
 						{/* TXT Record Configuration for Verification */}
 						{showTXTRecord && (
 							<div className="overflow-hidden rounded-lg border border-gray-4">

apps/web/app/api/playlist/route.ts

@@ -41,7 +41,7 @@ class Api extends HttpApi.make("CapWebApi").add(
 			.addError(HttpApiError.InternalServerError)
 			.addError(HttpApiError.NotFound),
 	),
-) { }
+) {}
 
 const ApiLive = HttpApiBuilder.api(Api).pipe(
 	Layer.provide(
@@ -198,11 +198,13 @@ const getPlaylistResponse = (
 				const generatedPlaylist = generateMasterPlaylist(
 					videoMetadata?.Metadata?.resolution ?? "",
 					videoMetadata?.Metadata?.bandwidth ?? "",
-					`${serverEnv().WEB_URL}/api/playlist?userId=${video.ownerId
+					`${serverEnv().WEB_URL}/api/playlist?userId=${
+						video.ownerId
 					}&videoId=${video.id}&videoType=video`,
 					audioMetadata
-						? `${serverEnv().WEB_URL}/api/playlist?userId=${video.ownerId
-						}&videoId=${video.id}&videoType=audio`
+						? `${serverEnv().WEB_URL}/api/playlist?userId=${
+								video.ownerId
+							}&videoId=${video.id}&videoType=audio`
 						: null,
 				);
 

apps/web/app/api/video/delete/route.ts

@@ -6,7 +6,6 @@ import {
 	HttpApiEndpoint,
 	HttpApiError,
 	HttpApiGroup,
-	HttpServerResponse,
 } from "@effect/platform";
 import { Effect, Layer, Schema } from "effect";
 import { apiToHandler } from "@/lib/server";
@@ -19,7 +18,7 @@ class Api extends HttpApi.make("Api").add(
 			.addError(HttpApiError.Forbidden)
 			.addError(HttpApiError.NotFound),
 	),
-) { }
+) {}
 
 const ApiLive = HttpApiBuilder.api(Api).pipe(
 	Layer.provide(

apps/web/package.json

@@ -113,6 +113,7 @@
 		"subtitles-parser-vtt": "^0.1.0",
 		"tailwind-merge": "^2.6.0",
 		"tailwindcss-animate": "^1.0.7",
+		"tldts": "^7.0.11",
 		"uuid": "^9.0.1",
 		"zod": "^3.25.76"
 	},

packages/web-backend/src/S3Buckets/index.ts

@@ -13,28 +13,26 @@ export class S3Buckets extends Effect.Service<S3Buckets>()("S3Buckets", {
 		const repo = yield* S3BucketsRepo;
 
 		const defaultConfigs = {
-			publicEndpoint:
-				yield* Config.string("S3_PUBLIC_ENDPOINT").pipe(
-					Config.orElse(() => Config.string("CAP_AWS_ENDPOINT")),
-					Config.option,
-					Effect.flatten,
-					Effect.catchTag("NoSuchElementException", () =>
-						Effect.dieMessage(
-							"Neither S3_PUBLIC_ENDPOINT nor CAP_AWS_ENDPOINT provided",
-						),
+			publicEndpoint: yield* Config.string("S3_PUBLIC_ENDPOINT").pipe(
+				Config.orElse(() => Config.string("CAP_AWS_ENDPOINT")),
+				Config.option,
+				Effect.flatten,
+				Effect.catchTag("NoSuchElementException", () =>
+					Effect.dieMessage(
+						"Neither S3_PUBLIC_ENDPOINT nor CAP_AWS_ENDPOINT provided",
 					),
 				),
-			internalEndpoint:
-				yield* Config.string("S3_INTERNAL_ENDPOINT").pipe(
-					Config.orElse(() => Config.string("CAP_AWS_ENDPOINT")),
-					Config.option,
-					Effect.flatten,
-					Effect.catchTag("NoSuchElementException", () =>
-						Effect.dieMessage(
-							"Neither S3_INTERNAL_ENDPOINT nor CAP_AWS_ENDPOINT provided",
-						),
+			),
+			internalEndpoint: yield* Config.string("S3_INTERNAL_ENDPOINT").pipe(
+				Config.orElse(() => Config.string("CAP_AWS_ENDPOINT")),
+				Config.option,
+				Effect.flatten,
+				Effect.catchTag("NoSuchElementException", () =>
+					Effect.dieMessage(
+						"Neither S3_INTERNAL_ENDPOINT nor CAP_AWS_ENDPOINT provided",
 					),
 				),
+			),
 			region: yield* Config.string("CAP_AWS_REGION"),
 			accessKey: yield* Config.string("CAP_AWS_ACCESS_KEY"),
 			secretKey: yield* Config.string("CAP_AWS_SECRET_KEY"),
@@ -181,4 +179,4 @@ export class S3Buckets extends Effect.Service<S3Buckets>()("S3Buckets", {
 		};
 	}),
 	dependencies: [S3BucketsRepo.Default],
-}) { }
+}) {}

packages/web-backend/src/Videos/index.ts

@@ -18,10 +18,12 @@ export class Videos extends Effect.Service<Videos>()("Videos", {
 			// This is only for external use since it does an access check,
 			// internal use should prefer the repo directly
 			getById: (id: Video.VideoId) =>
-				repo.getById(id).pipe(
-					Policy.withPublicPolicy(policy.canView(id)),
-					Effect.withSpan("Videos.getById"),
-				),
+				repo
+					.getById(id)
+					.pipe(
+						Policy.withPublicPolicy(policy.canView(id)),
+						Effect.withSpan("Videos.getById"),
+					),
 
 			/*
 			 * Delete a video. Will fail if the user does not have access.
@@ -104,4 +106,4 @@ export class Videos extends Effect.Service<Videos>()("Videos", {
 		};
 	}),
 	dependencies: [VideosPolicy.Default, VideosRepo.Default, S3Buckets.Default],
-}) { }
+}) {}