From 2e5edc88d6d8475792271ef5cc0198ff6ee969b0 Mon Sep 17 00:00:00 2001
From: Carlos Zamora <uriel.zamora@encora.com>
Date: Fri, 27 Jun 2025 00:23:56 -0600
Subject: [PATCH 1/4] fix(ui): prevent overlaps and overflow by updating layout
 in PAT section of ingest form

---
 .../templates/components/git_form.jinja       | 123 +++++++++---------
 1 file changed, 59 insertions(+), 64 deletions(-)

diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index bf18804d..181e46ce 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -1,11 +1,11 @@
 <script>
     function changePattern(element) {
-        console.log("Pattern changed", element.value);
+        console.log('Pattern changed', element.value);
         let patternType = element.value;
-        const files = document.getElementsByName("tree-line");
+        const files = document.getElementsByName('tree-line');
 
         Array.from(files).forEach((element) => {
-            if (element.textContent.includes("Directory structure:")) {
+            if (element.textContent.includes('Directory structure:')) {
                 return;
             }
 
@@ -21,15 +21,16 @@
     function toggleAccessSettings() {
         const container = document.getElementById('accessSettingsContainer');
         const checkbox = document.getElementById('showAccessSettings');
-        const row = document.getElementById('controlsRow');
+        const examples = document.getElementById('exampleRepositories')
         const show = checkbox.checked;
+
         container.classList.toggle('hidden', !show);
-        row.classList.toggle('mb-12', show);
+        examples.classList.toggle('lg:mt-0', show);
     }
 </script>
 <div class="relative">
     <div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
-    <div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
+    <div class="rounded-xl relative z-20 p-8 sm:p-10 border-[3px] border-gray-900 bg-[#fff4da]">
         <img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
              class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
         <!-- Ingest Form -->
@@ -63,64 +64,59 @@
             <input type="hidden" name="pattern" value="">
             <!-- Controls row: pattern selector, file size slider, PAT checkbox with PAT field below -->
             <div id="controlsRow"
-                 class="mt-7 flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10 relative">
-                <!-- Pattern selector + file size slider (side by side) -->
-                <div class="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-10 flex-1 w-full">
-                    <!-- Pattern selector -->
-                    <div class="w-full md:w-[260px]">
-                        <div class="relative">
-                            <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
-                            <div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
-                                <!-- Pattern type selector -->
-                                <div class="relative flex items-center">
-                                    <select id="pattern_type"
-                                            onchange="changePattern(this)"
-                                            name="pattern_type"
-                                            class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
-                                        <option value="exclude"
-                                                {% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
-                                            Exclude
-                                        </option>
-                                        <option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
-                                    </select>
-                                    <svg class="absolute right-2 w-4 h-4 pointer-events-none"
-                                         xmlns="http://www.w3.org/2000/svg"
-                                         viewBox="0 0 24 24"
-                                         fill="none"
-                                         stroke="currentColor"
-                                         stroke-width="2"
-                                         stroke-linecap="round"
-                                         stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9" />
-                                    </svg>
-                                </div>
-                                <!-- Pattern input field -->
-                                <input type="text"
-                                       id="pattern"
-                                       name="pattern"
-                                       placeholder="*.md, src/ "
-                                       value="{{ pattern if pattern else '' }}"
-                                       class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
-                            </div>
+                 class="mt-7 grid gap-6 grid-cols-1 sm:grid-cols-[3fr_2fr] md:gap-x-10 lg:grid-cols-[5fr_4fr_4fr] lg:gap-y-0">
+                <!-- Pattern selector -->
+                <div class="w-full relative self-center">
+                    <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
+                    <div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
+                        <!-- Pattern type selector -->
+                        <div class="relative flex items-center">
+                            <select id="pattern_type"
+                                    onchange="changePattern(this)"
+                                    name="pattern_type"
+                                    class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
+                                <option value="exclude"
+                                        {% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
+                                    Exclude
+                                </option>
+                                <option value="include" {% if pattern_type == 'include' %}selected{% endif %}>Include</option>
+                            </select>
+                            <svg class="absolute right-2 w-4 h-4 pointer-events-none"
+                                 xmlns="http://www.w3.org/2000/svg"
+                                 viewBox="0 0 24 24"
+                                 fill="none"
+                                 stroke="currentColor"
+                                 stroke-width="2"
+                                 stroke-linecap="round"
+                                 stroke-linejoin="round">
+                                <polyline points="6 9 12 15 18 9" />
+                            </svg>
                         </div>
+                        <!-- Pattern input field -->
+                        <input type="text"
+                               id="pattern"
+                               name="pattern"
+                               placeholder="*.md, src/ "
+                               value="{{ pattern if pattern else '' }}"
+                               class=" py-2 px-2 bg-[#E8F0FE] focus:outline-none w-full">
                     </div>
-                    <!-- File size selector -->
-                    <div class="w-full md:w-[200px]">
-                        <label for="file_size" class="block text-gray-700 mb-1">
-                            Include files under: <span id="size_value" class="font-bold">50kB</span>
-                        </label>
-                        <input type="range"
-                               id="file_size"
-                               name="max_file_size"
-                               min="0"
-                               max="500"
-                               required
-                               value="{{ default_file_size }}"
-                               class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]  ">
-                    </div>
+                </div>
+                <!-- File size selector -->
+                <div class="w-full self-center">
+                    <label for="file_size" class="block text-gray-700 mb-1">
+                        Include files under: <span id="size_value" class="font-bold">50kB</span>
+                    </label>
+                    <input type="range"
+                           id="file_size"
+                           name="max_file_size"
+                           min="0"
+                           max="500"
+                           required
+                           value="{{ default_file_size }}"
+                           class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
                 </div>
                 <!-- PAT checkbox with PAT field below -->
-                <div class="relative flex flex-col items-start justify-center w-full md:w-64">
+                <div class="flex flex-col items-start w-full sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-3.5">
                     <!-- PAT checkbox -->
                     <div class="flex items-center space-x-2">
                         <input type="checkbox"
@@ -133,7 +129,7 @@
                     </div>
                     <!-- PAT field -->
                     <div id="accessSettingsContainer"
-                         class="{% if not token %}hidden {% endif %}mt-2 w-full md:absolute md:left-0 md:top-full md:z-30">
+                         class="{% if not token %}hidden {% endif %}mt-2 w-full">
                         <div class="relative w-full">
                             <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
                             <div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">
@@ -157,8 +153,7 @@
                                      stroke="currentColor"
                                      viewBox="0 0 24 24"
                                      xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
-                                    </path>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                 </svg>
                             </a>
                         </div>
@@ -168,7 +163,7 @@
         </form>
         <!-- Example repositories section -->
         {% if show_examples %}
-            <div class="mt-4">
+            <div id="exampleRepositories" class="mt-4">
                 <p class="opacity-70 mb-1">Try these example repositories:</p>
                 <div class="flex flex-wrap gap-2">
                     {% for example in examples %}

From 4b1c90b26758eddabf6ae55d2187363ef88f009a Mon Sep 17 00:00:00 2001
From: Carlos Zamora <uriel.zamora@encora.com>
Date: Fri, 27 Jun 2025 00:26:47 -0600
Subject: [PATCH 2/4] feat(ui): replace native checkbox styles with custom
 design

---
 src/server/templates/components/git_form.jinja | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index 181e46ce..017f2d3a 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -119,12 +119,18 @@
                 <div class="flex flex-col items-start w-full sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-3.5">
                     <!-- PAT checkbox -->
                     <div class="flex items-center space-x-2">
-                        <input type="checkbox"
-                               id="showAccessSettings"
-                               class="w-4 h-4 rounded border-gray-900"
-                               onchange="toggleAccessSettings()"
-                               {% if token %}checked{% endif %}>
-                        <label for="showAccessSettings" class="text-gray-900">Private Repository</label>
+                        <label for="showAccessSettings" class="flex gap-2 text-gray-900">
+                            <div class="relative w-6 h-6">
+                                <input type="checkbox"
+                                       id="showAccessSettings"
+                                       onchange="toggleAccessSettings()"
+                                       {% if token %}checked{% endif %}
+                                       class="peer appearance-none w-full h-full rounded-sm border-[3px] border-current bg-white m-0 text-current shadow-[3px_3px_0_currentColor]" />
+                                <span class="absolute inset-0 w-3 h-3 m-auto scale-0 transition-transform duration-150 ease-in-out shadow-[inset_1rem_1rem_#FE4A60] bg-[CanvasText] origin-bottom-left peer-checked:scale-100"
+                                      style="clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)"></span>
+                            </div>
+                            Private Repository
+                        </label>
                         {% include "components/badge_new.jinja" %}
                     </div>
                     <!-- PAT field -->

From 7ac52e75a63904d2c91855010deab521589edb0c Mon Sep 17 00:00:00 2001
From: Carlos Zamora <uriel.zamora@encora.com>
Date: Fri, 27 Jun 2025 01:38:21 -0600
Subject: [PATCH 3/4] fix(ui): add missing cursor-pointer styles to inputs in
 ingest form

---
 src/server/templates/components/git_form.jinja | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index 017f2d3a..3fe4c0cb 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -74,7 +74,7 @@
                             <select id="pattern_type"
                                     onchange="changePattern(this)"
                                     name="pattern_type"
-                                    class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900">
+                                    class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900 cursor-pointer">
                                 <option value="exclude"
                                         {% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
                                     Exclude
@@ -119,13 +119,14 @@
                 <div class="flex flex-col items-start w-full sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-3.5">
                     <!-- PAT checkbox -->
                     <div class="flex items-center space-x-2">
-                        <label for="showAccessSettings" class="flex gap-2 text-gray-900">
+                        <label for="showAccessSettings"
+                               class="flex gap-2 text-gray-900 cursor-pointer">
                             <div class="relative w-6 h-6">
                                 <input type="checkbox"
                                        id="showAccessSettings"
                                        onchange="toggleAccessSettings()"
                                        {% if token %}checked{% endif %}
-                                       class="peer appearance-none w-full h-full rounded-sm border-[3px] border-current bg-white m-0 text-current shadow-[3px_3px_0_currentColor]" />
+                                       class="cursor-pointer peer appearance-none w-full h-full rounded-sm border-[3px] border-current bg-white m-0 text-current shadow-[3px_3px_0_currentColor]" />
                                 <span class="absolute inset-0 w-3 h-3 m-auto scale-0 transition-transform duration-150 ease-in-out shadow-[inset_1rem_1rem_#FE4A60] bg-[CanvasText] origin-bottom-left peer-checked:scale-100"
                                       style="clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)"></span>
                             </div>
@@ -135,7 +136,7 @@
                     </div>
                     <!-- PAT field -->
                     <div id="accessSettingsContainer"
-                         class="{% if not token %}hidden {% endif %}mt-2 w-full">
+                         class="{% if not token %}hidden {% endif %}mt-3 w-full">
                         <div class="relative w-full">
                             <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10"></div>
                             <div class="flex relative z-20 border-[3px] border-gray-900 rounded bg-white">

From 5d0bd1e2b961b91eb49d7c46e569ee0ae4ad9706 Mon Sep 17 00:00:00 2001
From: Carlos Zamora <uriel.zamora@encora.com>
Date: Fri, 27 Jun 2025 12:11:52 -0600
Subject: [PATCH 4/4] fix(ui): apply top margin to example repositories section
 if token is present

---
 src/server/templates/components/git_form.jinja | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/server/templates/components/git_form.jinja b/src/server/templates/components/git_form.jinja
index 3fe4c0cb..a8b51428 100644
--- a/src/server/templates/components/git_form.jinja
+++ b/src/server/templates/components/git_form.jinja
@@ -170,7 +170,8 @@
         </form>
         <!-- Example repositories section -->
         {% if show_examples %}
-            <div id="exampleRepositories" class="mt-4">
+            <div id="exampleRepositories"
+                 class="{% if token %}lg:mt-0 {% endif %} mt-4">
                 <p class="opacity-70 mb-1">Try these example repositories:</p>
                 <div class="flex flex-wrap gap-2">
                     {% for example in examples %}