Adiciona scroll na horizontal para programação

html/assets/css/style.css

@@ -40,7 +40,17 @@
   border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+QGtleWZyYW1lcyBzdHJva2V7MCV7c3Ryb2tlLWRhc2hhcnJheTo3MCwzNTA7c3Ryb2tlLWRhc2hvZmZzZXQ6MH0xJXtzdHJva2UtZGFzaGFycmF5OjU1LDM1MDtzdHJva2UtZGFzaG9mZnNldDowfTUle3N0cm9rZS1kYXNoYXJyYXk6NTAsMzUwO3N0cm9rZS1kYXNob2Zmc2V0OjB9OSV7c3Ryb2tlLWRhc2hhcnJheToxNSwzNTAsMzA7c3Ryb2tlLWRhc2hvZmZzZXQ6MH10b3tzdHJva2UtZGFzaG9mZnNldDo3NzZ9fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSJwcmVmaXhfX2ciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4ZDU5IiBzdG9wLW9wYWNpdHk9Ii41Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjcyNmZmIiBzdG9wLW9wYWNpdHk9Ii44Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMS41IDEuNWg5N3Y5N2gtOTd2LTk3IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2U9InVybCgjcHJlZml4X19nKSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iNTAgNzc2IiBzdHlsZT0iYW5pbWF0aW9uOnN0cm9rZSAxLjVzIGxpbmVhciBpbmZpbml0ZSIvPjwvc3ZnPg==") 1;
 }
 
-.grade {
-  grid-template-columns: 5rem 1fr 1fr 1fr 1fr;
+.grade-h-a-l {
+  grid-template-columns: 5rem minmax(110px, 1fr) minmax(160px, 1fr) 1fr;
+  grid-template-rows: repeat(auto-fit, 30px);
+}
+
+.grade-h-a-l-c {
+  grid-template-columns: 5rem minmax(110px, 1fr) minmax(160px, 1fr) 1fr;
+  grid-template-rows: repeat(auto-fit, 30px);
+}
+
+.grade-m-sv {
+  grid-template-columns: 5rem 1fr 1fr;
   grid-template-rows: repeat(auto-fit, 30px);
 }

html/index.html

@@ -336,12 +336,11 @@
             <span class="p-1">Copa</span>
           </div>
         </div>
-        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+        <div class="grade-h-a-l overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
           <div class="bg-white text-center font-bold">Horário</div>
           <div class="bg-white text-center font-bold">Hall DINF</div>
           <div class="bg-white text-center font-bold">Auditório DINF</div>
           <div class="bg-white text-center font-bold">Lab 1-2</div>
-          <div class="bg-white text-center font-bold">CAAD</div>
 
           <div class="bg-white text-center col-start-1">09h30</div>
           <div class="bg-white col-start-3 bg-green-200 text-center flex justify-center items-center row-span-3">
@@ -413,12 +412,11 @@
             <span class="p-1">Copa</span>
           </div>
         </div>
-        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+        <div class="grade-h-a-l overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
           <div class="bg-white text-center font-bold">Horário</div>
           <div class="bg-white text-center font-bold">Hall DINF</div>
           <div class="bg-white text-center font-bold">Auditório DINF</div>
           <div class="bg-white text-center font-bold">Lab 1-2</div>
-          <div class="bg-white text-center font-bold">CAAD</div>
 
           <div class="bg-white text-center col-start-1">09h30</div>
           <div class="bg-white col-start-4 bg-blue-200 text-center flex justify-center items-center row-span-4">
@@ -487,7 +485,7 @@
             <span class="p-1">Copa</span>
           </div>
         </div>
-        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+        <div class="grade-h-a-l-c overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
           <div class="bg-white text-center font-bold">Horário</div>
           <div class="bg-white text-center font-bold">Hall DINF</div>
           <div class="bg-white text-center font-bold">Auditório DINF</div>
@@ -558,7 +556,7 @@
             <span class="p-1">Copa</span>
           </div>
         </div>
-        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 5rem 1fr 1fr">
+        <div class="grade-m-sv w-full overflow-auto grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
           <div class="bg-white text-center font-bold">Horário</div>
           <div class="bg-white text-center font-bold">Maratona</div>
           <div class="bg-white text-center font-bold">Sala Virtual</div>
@@ -620,7 +618,7 @@
             <span class="p-1">Copa</span>
           </div>
         </div>
-        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 5rem 1fr 1fr">
+        <div class="grade-m-sv overflow-auto w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
           <div class="bg-white text-center font-bold">Horário</div>
           <div class="bg-white text-center font-bold">Maratona</div>
           <div class="bg-white text-center font-bold">Sala Virtual</div>