Release

src/components/common/Frame.astro

@@ -27,7 +27,7 @@
  */
 
 export interface Props {
-  size?: "lg" | "md" | "sm" | "xs";
+  size?: "lg" | "md" | "sm" | "xs" | "sp";
   color?: "blue" | "purple";
   class?: string;
   contentContainerClass?: string;
@@ -44,6 +44,10 @@ const frameSvg = `/images/frame/frame-${color}-${size}.svg`;
 
 // Size configuration with aspect ratios and minimum heights
 const sizeConfig = {
+  sp: {
+    aspectRatio: "346/300",
+    minHeight: "300px",
+  },
   lg: {
     aspectRatio: "346/550",
     minHeight: "550px",
@@ -110,6 +114,10 @@ const config = sizeConfig[size];
     margin: 4% 7%;
   }
 
+  .frame-container[data-size="sp"] .frame-content-clip {
+    margin: 3% 5%;
+  }
+
   /* Custom scrollbar styling */
   .frame-content-clip {
     scrollbar-width: thin;

src/components/common/MapDropdown.tsx

@@ -64,13 +64,13 @@ const MapDropdown: React.FC<MapDropdownProps> = ({
         aria-expanded={open}
         aria-haspopup="true"
         type="button"
-        onClick={handleTriggerClick}
+        onClick={options.length > 1 ? handleTriggerClick : undefined}
       >
         <span className={cn("px-2 text-white drop-shadow-lg", liClassName)}>
           {selectedOption.label}
         </span>
         <div className="flex h-10 w-10 items-center justify-center">
-          <ChevronDown size={18} color="white" />
+          {options.length > 1 ? <ChevronDown size={18} color="white" /> : null}
         </div>
       </button>
       <div

src/components/common/react/Frame.tsx

@@ -1,6 +1,6 @@
 
-import React from "react";
 import type { ReactNode } from "react";
+import React from "react";
 
 import { X } from "lucide-react";
 
@@ -42,6 +42,7 @@ export interface FrameProps {
   noWrapper?: boolean;
   children: ReactNode;
   frameId?: string;
+  noScroll?: boolean; // Optional prop to disable scrolling
   onClickX?: () => void;
 }
 
@@ -52,6 +53,7 @@ const Frame: React.FC<FrameProps> = ({
   noWrapper = false,
   children,
   frameId: propFrameId,
+  noScroll = false,
   onClickX,
 }) => {
   const { theme } = useTheme();
@@ -158,7 +160,7 @@ const Frame: React.FC<FrameProps> = ({
 
         {/* Content area with proper clipping */}
         <div
-          className={`content-area absolute inset-0 flex ${contentClipClass} overflow-auto`}
+          className={`content-area absolute inset-0 flex ${contentClipClass} ${noScroll ? "overflow-visible" : "overflow-auto"}`}
         >
           {noWrapper ? (
             children

src/components/firstdate/Navbar.astro

@@ -69,6 +69,9 @@ import ButtonFd from "@common/ButtonFd.astro";
       <li>
         <a href="/firstdate/events/rpkm">รับเพื่อนก้าวใหม่</a>
       </li>
+      <li>
+        <a href="/firstdate/events/freshmen-night">Freshmen Night</a>
+      </li>
       <li>
         <a href="/profile">PROFILE</a>
       </li>