素材管理（#99） (#303)

#99

#99

#99

#99

#99

#99

#99

#99

#99

#99

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #303

frontend/src/components/layout/MainArea.tsx

@@ -8,6 +8,8 @@ type Props = {
 
 
 export default (({ children, className }: Props) => (
-    <main className={cn ('flex-1 overflow-y-auto p-4', className)}>
+    <main className={cn ('flex-1 overflow-y-auto p-4',
+			 'md:h-[calc(100dvh-88px)] md:overflow-y-auto',
+			 className)}>
       {children}
     </main>)) satisfies FC<Props>

frontend/src/components/layout/SidebarComponent.tsx

@@ -1,9 +1,29 @@
-import React from 'react'
+import { Helmet } from 'react-helmet-async'
 
-type Props = { children: React.ReactNode }
+import type { FC, ReactNode } from 'react'
+
+type Props = { children: ReactNode }
 
 
-export default ({ children }: Props) => (
-    <div className="p-4 w-full md:w-64 md:h-full">
+export default (({ children }: Props) => (
+    <div
+	className="p-4 w-full md:w-64 md:h-full
+		   md:h-[calc(100dvh-88px)] md:overflow-y-auto
+		   sidebar">
+      <Helmet>
+	<style>
+	  {`
+	      .sidebar
+	      {
+		direction: rtl;
+	      }
+
+	      .sidebar > *
+	      {
+		direction: ltr;
+	      }`}
+	</style>
+      </Helmet>
+
       {children}
-    </div>)
+    </div>)) satisfies FC<Props>