Fix/modal-whitespace-bottom

src/components/tab-manager.tsx

@@ -17,6 +17,7 @@ interface TabManagerProps {
 	onTabChange?: (tabValue: string) => void
 	direction?: 'rtl' | 'ltr'
 	tabPosition?: 'top' | 'side'
+	children?: ReactNode // for additional tab buttons at the end of aside (just pass the actual buttons)
 }
 
 export const TabManager = ({
@@ -27,6 +28,7 @@ export const TabManager = ({
 	direction = 'rtl',
 	tabOwner,
 	tabPosition,
+	children,
 }: TabManagerProps) => {
 	const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.value || '')
 	const contentRef = useRef<HTMLDivElement>(null)
@@ -69,28 +71,34 @@ export const TabManager = ({
 			? 'shrink-0 md:overflow-y-auto w-full'
 			: 'md:flex-col md:w-48 shrink-0 md:overflow-y-auto'
 	return (
-		<div dir={direction} className={`flex ${headClass}  overflow-hidden`}>
-			<div
-				className={`flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass}`}
-			>
-				{tabs.map(({ label, value, icon, isNew }) => (
-					<button
-						key={value}
-						onClick={() => handleTabChange(value)}
-						className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
-					>
-						<span
-							className={`relative ${getTabIconStyle(activeTab === value)}`}
-						>
-							{icon}
-							{isNew && (
-								<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
-							)}
-						</span>
-						<span className="text-sm">{label}</span>
-					</button>
-				))}
-			</div>{' '}
+		<div dir={direction} className={`flex ${headClass}   overflow-hidden`}>
+			<aside className="flex flex-row justify-between overflow-hidden sm:flex-col md:h-full">
+				<div
+					className={`flex  w-full md:h-full justify-between overflow-x-auto rounded-lg ${contentClass}`}
+				>
+					<div className="flex flex-row sm:flex-col sm:gap-2">
+						{tabs.map(({ label, value, icon, isNew }) => (
+							<button
+								key={value}
+								onClick={() => handleTabChange(value)}
+								className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
+							>
+								<span
+									className={`relative ${getTabIconStyle(activeTab === value)}`}
+								>
+									{icon}
+									{isNew && (
+										<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
+									)}
+								</span>
+								<span className="text-sm">{label}</span>
+							</button>
+						))}
+					</div>
+					{children}
+				</div>
+			</aside>
+
 			<div
 				className="relative flex-1 overflow-x-hidden overflow-y-auto rounded-lg"
 				ref={contentRef}

src/layouts/setting/setting-modal.tsx

@@ -96,22 +96,26 @@ export const SettingModal = ({ isOpen, onClose, selectedTab }: SettingModalProps
 				defaultTab="general"
 				selectedTab={selectedTab}
 				direction="rtl"
-			/>
-			<button
-				className={`relative  items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-				onClick={() => openWidgetSettings()}
-			>
-				<TbApps size={20} className="text-muted" />
-				<span className="text-sm font-light">مدیریت ویجت ها</span>
-				<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
-			</button>
-			<button
-				className={`relative  items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-				onClick={() => setUpdateModalOpen(true)}
 			>
-				<VscMegaphone size={20} />
-				<span className="text-sm font-light">تغییرات اخیر</span>
-			</button>
+				<div className="flex flex-row gap-1 sm:flex-col">
+					<button
+						className={`relative items-center  flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+						onClick={() => openWidgetSettings()}
+					>
+						<TbApps size={20} className="text-muted" />
+						<span className="text-sm font-light">مدیریت ویجت ها</span>
+						<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
+					</button>
+					<button
+						className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+						onClick={() => setUpdateModalOpen(true)}
+					>
+						<VscMegaphone size={20} />
+						<span className="text-sm font-light">تغییرات اخیر</span>
+					</button>
+				</div>
+			</TabManager>
+
 			<UpdateReleaseNotesModal
 				isOpen={isUpdateModalOpen}
 				onClose={() => setUpdateModalOpen(false)}

src/layouts/widgets-settings/widget-settings-modal.tsx

@@ -89,16 +89,17 @@ export function WidgetSettingsModal({
 				tabOwner="widgets-settings"
 				defaultTab={selectedTab || WidgetTabKeys.widget_management}
 				direction="rtl"
-			/>
-			<button
-				className={`relative  items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-				onClick={() => {
-					onClickSettings()
-				}}
 			>
-				<VscSettings size={20} className="text-muted" />
-				<span className="text-sm font-light">تنظیمات</span>
-			</button>
+				<button
+					className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+					onClick={() => {
+						onClickSettings()
+					}}
+				>
+					<VscSettings size={20} className="text-muted" />
+					<span className="text-sm font-light">تنظیمات</span>
+				</button>
+			</TabManager>
 		</Modal>
 	)
 }