#4155 Wiki: responsive columns

template/layout_1_column_wiki.html

@@ -1,17 +1,17 @@
 <!-- layout 1 column with menu on left and contents on right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bcb">
-    <div class="bx-layout-row flex">
-        <div class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin w-1/4">
+    <div class="bx-layout-row flex flex-col md:flex-row">
+        <div class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4">
             <div class="bx-layout-cell pr-2 lg:pr-3" id="bx-layout-cell-1">
                 <bx_page:wiki-pages-list />
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-bcb-content bx-layout-column-half w-1/2">
+        <div class="bx-layout-col bx-layout-bcb-content bx-layout-column-half md:w-1/2 max-md:order-2 md:order-1">
             <div class="bx-layout-cell px-2 lg:px-3" id="bx-layout-cell-2">
                 __cell_1__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin w-1/4">
+        <div class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/4 max-md:order-1 md:order-2">
             <div class="bx-layout-cell pl-2 lg:pl-3" id="bx-layout-cell-3">
                 <bx_page:wiki-page-contents />
             </div>

template/wiki_contents.html

@@ -1,5 +1,5 @@
-<ul class="bx-wiki-contents bx-def-font-large markdown-body">
+<div class="bx-wiki-contents markdown-body w-full overflow-y-auto h-32 md:h-max w-full border border-gray-300 dark:border-gray-700">
     <bx_repeat:pages>
-        <li><a href="__url__">__title__</a></li>
+        <a class="block py-2 px-4 w-full border-b last:border-0 border-b-gray-300 dark:border-b-gray-700 bg-white/95 dark:bg-gray-800/95" href="__url__">__title__</a>
     </bx_repeat:pages>
-</ul>
+</div>