Template Explorer Modal Responsive

libs/remix-ui/template-explorer-modal/src/components/genericWorkspaceTemplate.tsx

@@ -72,7 +72,7 @@ export function GenericWorkspaceTemplate() {
 
   return (
     <section data-id={`generic-template-section-${state.workspaceTemplateChosen.value}`} className="mx-3 p-2">
-      <div className="d-flex flex-column p-3 bg-light" style={{ height: state.workspaceName === 'MultiSig Wallet' ? '90%' : calculateHeight() }}>
+      <div className="d-flex flex-column p-3 bg-light" style={{ height: state.workspaceName === 'MultiSig Wallet' ? '98%' : calculateHeight() }}>
         <div>
           <label className="form-label text-uppercase small mb-1">Workspace name</label>
         </div>

libs/remix-ui/template-explorer-modal/src/components/template-explorer-body.tsx

@@ -6,7 +6,7 @@ import { NotFound } from './notfound'
 import { MatomoCategories } from '@remix-api'
 
 export function TemplateExplorerBody() {
-  const { selectedTag, allTags, handleTagClick, clearFilter, dedupedTemplates, state, theme, trackMatomoEvent } = useContext(TemplateExplorerContext)
+  const { selectedTag, allTags, handleTagClick, clearFilter, dedupedTemplates, state, theme, trackMatomoEvent, fileMode } = useContext(TemplateExplorerContext)
 
   const filterTheseTags = tag => tag !== 'Circom' && tag !== 'All' && tag !== 'Noir' && tag !== 'AI'
 
@@ -15,7 +15,7 @@ export function TemplateExplorerBody() {
       <TopCards />
       {
         (dedupedTemplates.length === 0) ? <NotFound /> : (
-          <div className={"body overflow-y-hidden pt-2"}>
+          <div className={"body pt-2 mb-3"} style={{ height: `calc(88vh - ${fileMode ? 350 : 410}px)` }}>
             <>
               <div className="d-flex flex-column gap-1">
                 <label

libs/remix-ui/template-explorer-modal/src/components/template-explorer.tsx

@@ -10,7 +10,7 @@ export function TemplateExplorer() {
 
   return (
 
-    <div data-id="template-explorer-template-container" className={theme?.name === 'Dark' ? 'template-explorer-container overflow-y-auto text-white-force' : 'template-explorer-container overflow-y-auto text-dark'}>
+    <div data-id="template-explorer-template-container" className={theme?.name === 'Dark' ? 'text-white-force' : 'text-dark'} style={{ overflowY: 'scroll', height: '85%' }}>
 
       {dedupedTemplates?.map((template: TemplateCategory, templateIndex) => (
         <div key={template.name} className="template-category mb-4" data-id={`template-category-${template.name}`}>

libs/remix-ui/template-explorer-modal/src/components/topCards.tsx

@@ -156,7 +156,7 @@ export function TopCards() {
   return (
     <div className="title">
       <div className="row g-3 mb-1" style={{ position: 'relative' }}>
-        <div className="col-6">
+        <div className="col-12 col-md-6">
           <div
             data-id="create-blank-workspace-topcard"
             className={`explora-topcard d-flex flex-row align-items-center bg-light p-3 p-md-4 shadow-sm border-0 h-100 ${theme?.name === 'Dark' ? 'text-white-dimmed' : 'text-dark'}`}
@@ -195,7 +195,7 @@ export function TopCards() {
             </span>
           </div>
         </div>
-        <div className="col-6">
+        <div className="col-12 col-md-6">
           <div
             data-id="create-with-ai-topcard"
             className={`explora-topcard d-flex flex-row align-items-center bg-light p-3 p-md-4 shadow-sm border-0 h-100 ${theme?.name === 'Dark' ? 'text-white-dimmed' : 'text-dark'}`}
@@ -247,7 +247,7 @@ export function TopCards() {
             </span>
           </div>
         </div>
-        <div className="col-6">
+        <div className="col-12 col-md-6">
           <div
             data-id="contract-wizard-topcard"
             className={`explora-topcard d-flex flex-row align-items-center bg-light p-3 p-md-4 shadow-sm border-0 h-100 ${theme?.name === 'Dark' ? 'text-white-dimmed' : 'text-dark'}`}
@@ -283,7 +283,7 @@ export function TopCards() {
             </span>
           </div>
         </div>
-        {(!isElectron() || state.manageCategory !== 'Template') && <div className="col-6">
+        {(!isElectron() || state.manageCategory !== 'Template') && <div className="col-12 col-md-6">
           <div
             ref={importCardRef}
             data-id="import-project-topcard"
@@ -351,7 +351,7 @@ export function TopCards() {
           </div>
         </div>}
         {importFiles && <ImportOptions />}
-        {state.manageCategory === 'Template' && <div className="col-6">
+        {state.manageCategory === 'Template' && <div className="col-12 col-md-6">
           <div
             data-id="create-git-clone"
             className={`explora-topcard d-flex flex-row align-items-center bg-light p-3 p-md-4 shadow-sm border-0 h-100 ${theme?.name === 'Dark' ? 'text-white-dimmed' : 'text-dark'}`}

libs/remix-ui/template-explorer-modal/src/components/workspaceDetails.tsx

@@ -56,7 +56,7 @@ export function WorkspaceDetails(props: WorkspaceDetailsProps) {
         </span> }
         <i data-id="default-workspace-name-edit-icon" className={`${showEditWorkspaceName ? 'fas fa-lock ms-2' : "ms-2 fas fa-edit"}`} onClick={() => setShowEditWorkspaceName(!showEditWorkspaceName)}></i>
       </div>
-      <div className="d-flex flex-row h-100 pt-1 ps-3 pe-3 pb-3 workspace-details-content-wrapper">
+      <div className="d-flex flex-column flex-md-row h-100 pt-1 ps-3 pe-3 pb-3 workspace-details-content-wrapper">
         <div className="workspace-details-file-explorer">
           <MiniFileExplorer />
         </div>

libs/remix-ui/template-explorer-modal/src/config/height-config.json

@@ -22,13 +22,13 @@
       "type": "includes",
       "field": "displayName",
       "value": "intro to eip-7702",
-      "percentage": "45%"
+      "percentage": "55%"
     },
     {
       "type": "includes",
       "field": "displayName",
       "value": "simple eip 7702",
-      "percentage": "45%"
+      "percentage": "55%"
     },
     {
       "type": "includes",

libs/remix-ui/template-explorer-modal/src/lib/remix-ui-template-explorer-modal.css

@@ -15,6 +15,10 @@
   display: flex;
   box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
   flex-direction: column;
+  /* ===> Responsive sizing of modal container <===*/
+  width: 70%;
+  max-width: 1200px;
+  min-width: 600px;
 }
 
 .template-explorer-modal-close-container {
@@ -80,8 +84,11 @@
 }
 
 .template-explorer-container {
-  height: 350px;
+  /* height: 60%; */
+  /* max-height: none;
+  min-height: 200px; */
   padding: 1rem;
+  overflow-y: auto;
 }
 
 .category-title {
@@ -97,7 +104,9 @@
 }
 
 .template-card {
-  width: 205px;
+  width: calc(50% - 12px);
+  min-width: 180px;
+  max-width: 250px;
   height: 110px;
   border-radius: 6px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -167,14 +176,16 @@
 
 .workspace-details-file-explorer {
   min-height: 80%;
-  min-width: 30%;
+  width: 100%;
+  min-width: 100%;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
 
 .workspace-details-editor-container {
   min-height: 75%;
-  min-width: 70%;
+  width: 100%;
+  min-width: 100%;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
@@ -207,3 +218,97 @@
 .text-white-dimmed {
   color: #ebf3f9 !important;
 }
+
+/* ========== Responsive Media Queries ========== */
+
+/* Responsive modal sizing */
+@media (max-width: 768px) {
+  .template-explorer-modal-container {
+    min-width: 600px;
+    width: 95%;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .template-explorer-modal-container {
+    width: 80%;
+    max-width: 900px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .template-explorer-modal-container {
+    width: 80%;
+    max-width: 1200px;
+  }
+}
+
+/* Template cards: 2→3→4 column progression */
+@media (min-width: 600px) and (max-width: 768px) {
+  .template-card {
+    width: calc(50% - 12px);
+    min-width: 170px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .template-card {
+    width: calc(33.333% - 16px);
+    min-width: 180px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .template-card {
+    width: calc(25% - 18px);
+    min-width: 200px;
+    max-width: 250px;
+  }
+}
+
+/* Template explorer container height */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .template-explorer-container {
+    max-height: 400px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .template-explorer-container {
+    max-height: 450px;
+  }
+}
+
+/* Workspace details responsive split */
+@media (min-width: 768px) {
+  .workspace-details-file-explorer {
+    width: 30%;
+    min-width: 30%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 10px;
+  }
+
+  .workspace-details-editor-container {
+    width: 70%;
+    min-width: 70%;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 10px;
+  }
+}
+
+@media (max-width: 767px) {
+  .workspace-details-file-explorer {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    max-height: 250px;
+    overflow-y: auto;
+  }
+
+  .workspace-details-editor-container {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    min-height: 300px;
+  }
+}

libs/remix-ui/template-explorer-modal/src/lib/remix-ui-template-explorer-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState, useEffect, useRef } from 'react'
 import './remix-ui-template-explorer-modal.css'
 import { AppState } from '@remix-ui/app'
 import { TemplateExplorerContext } from '../../context/template-explorer-context'
@@ -11,7 +11,7 @@ import { FinalScreen } from '../components/finalScreen'
 import { MatomoEvent, TemplateExplorerModalEvent,WorkspaceEvent } from '@remix-api'
 import TrackingContext from '@remix-ide/tracking'
 import { ImportFromIpfs } from '../components/importFromIpfs'
-import { TemplateExplorerWizardAction, TemplateExplorerWizardState } from '../../types/template-explorer-types'
+import { TemplateExplorerWizardAction } from '../../types/template-explorer-types'
 import { GitCloneScreen } from '../components/gitCloneScreen'
 
 export interface RemixUiTemplateExplorerModalProps {
@@ -26,10 +26,29 @@ export function RemixUiTemplateExplorerModal (props: RemixUiTemplateExplorerModa
   const trackMatomoEvent = <T extends MatomoEvent = TemplateExplorerModalEvent>(event: T) => {
     baseTrackEvent?.<T>(event)
   }
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [modalHeight, setModalHeight] = useState<string>('')
+
+  useEffect(() => {
+    // Calculate dynamic height based on content
+    if (containerRef.current) {
+      const scrollHeight = containerRef.current.scrollHeight
+      const viewportHeight = window.innerHeight
+      const maxHeight = Math.min(scrollHeight + 20, viewportHeight * 0.9) // 90vh max with 20px buffer
+
+      // Only set fixed height for non-template steps
+      if (state.wizardStep === 'reset' || state.wizardStep === 'template') {
+        setModalHeight(`${maxHeight}px`)
+      } else {
+        setModalHeight('720px')
+      }
+    }
+  }, [state.wizardStep, state.manageCategory])
+
   return (
     <section data-id="template-explorer-modal-react" data-path={`templateExplorerModal-${state.manageCategory}`}>
       <section className="template-explorer-modal-background" style={{ zIndex: 8888 }}>
-        <div className="template-explorer-modal-container border bg-dark p-2" style={{ width: '768px', height: parseHeight(state) }}>
+        <div ref={containerRef} className="template-explorer-modal-container border bg-dark p-2" style={{ height: modalHeight }}>
           <div className="template-explorer-modal-close-container bg-dark mb-3 w-100 d-flex flex-row justify-content-between align-items-center">
             {state.wizardStep === 'template' || state.wizardStep === 'reset' ? <div className="d-flex flex-row gap-2 w-100 mx-3 my-2">
               <input
@@ -81,8 +100,3 @@ export function RemixUiTemplateExplorerModal (props: RemixUiTemplateExplorerModa
     </section>
   )
 }
-
-function parseHeight(state: TemplateExplorerWizardState) {
-  return state.wizardStep === 'reset' || state.wizardStep === 'template' ? '' : state.wizardStep === 'gitClone' || state.wizardStep === 'genAI' || state.wizardStep === 'importFiles' || state.wizardStep === 'importHttps' || state.wizardStep === 'generic' || state.wizardStep === 'remixdefault' ? '720px' : ''
-}
-