Canvas based Dx - stylesheet like tabular edit

public/css/style.css

@@ -1022,3 +1022,23 @@ canvas.pdf-viewer-page {
     position: absolute;
     left: -9999px;
 }
+table.table-edit-sheet tbody tr td {
+    padding: 0;
+}
+table.table-edit-sheet tbody tr td>input,
+table.table-edit-sheet tbody tr td>select {
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    border: 0;
+    background: #fefefe;
+    width: 100% !important;
+    min-width: unset !important;
+}
+table.table-edit-sheet tbody tr td>input:focus,
+table.table-edit-sheet tbody tr td>select:focus {
+    background: #fff;
+    outline: 3px solid #4b88a633;
+}
+.w-35 {
+    width: 35%;
+}

resources/views/app/patient/canvas-sections/dx/form.blade.php

@@ -25,14 +25,14 @@ $formID = rand(0, 100000);
 
     <input type="hidden" name="data" value="{{json_encode($contentData)}}">
 
-    <table class="table table-sm table-bordered mb-2">
+    <table class="table table-sm table-bordered mb-2 table-edit-sheet">
         <thead>
         <tr class="bg-light">
             <th class="border-bottom-0">Title</th>
             <th class="border-bottom-0">ICD</th>
             <th class="border-bottom-0">Chr/Act.</th>
-            <th class="border-bottom-0">Detail</th>
-            <th class="border-bottom-0">Plan</th>
+            <th class="border-bottom-0 w-35">Detail</th>
+            <th class="border-bottom-0 w-35">Plan</th>
             <th class="border-bottom-0"></th>
         </tr>
         </thead>

resources/views/layouts/template.blade.php

@@ -265,6 +265,9 @@
             stagPopup.addClass('show');
             stagPopup.find('[moe][initialized]').removeAttr('initialized');
             initMoes();
+            window.setTimeout(function() {
+                stagPopup.find('input:visible,select:visible').first().focus();
+            }, 150);
             return false;
         }
         function submitStagPopup(_form) {