doc: fix responsiveness of the page

Adding some cases to properly show the page on mobile devices.

Fixes: PYSIDE-1498
Change-Id: Ia8ee234d09e5246745706f5b6aca29fe31075c04
Reviewed-by: Christian Tismer <tismer@stackless.com>
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>
Reviewed-by: Paul Wicking <paul.wicking@qt.io>
(cherry picked from commit 19bc892133ada1ceae68eb42ce330e2599e2ec33)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

2 files changed, 110 insertions, 12 deletions

diff --git a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
index 625a2d39b..6b9fe3f05 100644
--- a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
+++ b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
@@ -37,7 +37,20 @@ div.admonition a:last-child:after {
 }
 
 .body {
-    width: 100%
+    width: 100%;
+  background-color: #00FF00;
+  clear: both;
+  display:inline-block;
+  background-color:#fff;
+  padding: 25px 35px 20px 30px;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  -ms-box-sizing:border-box;
+  box-sizing:border-box;
+}
+.bodywrapper {
+    position: relative;
+    /*background-color: #0000ff;*/
 }
 .bodywrapper .admonition p.admonition-title {
   margin-bottom:5px
@@ -112,6 +125,14 @@ h2 em {
 
 .documentwrapper {
     margin-left: 255px;
+    position: relative;
+}
+@media screen and (max-width: 700px) {
+    .documentwrapper {
+        clear: both;
+        margin-left: 0px;
+        position: relative;
+    }
 }
 
 .body blockquote {
@@ -123,9 +144,10 @@ h2 em {
 .sphinxsidebar {
     float: left;
     width: 186px;
-    padding: 25px;
+    padding: 15px;
     text-align: left;
     background-color: #fff;
+    clear: both;
 }
 
 .sphinxsidebar ul {
@@ -1112,7 +1134,8 @@ a:hover {
 .main_index .row>div {
   letter-spacing:normal
 }
-.col-1,.body {
+.col-1 {
+  clear: both;
   display:inline-block;
   background-color:#fff;
   padding: 25px 35px 20px 30px;
@@ -1184,6 +1207,7 @@ div.multi-column div {
   position: -webkit-sticky;
   position: sticky;
   top: 64px;
+  width: 200px;
   overflow: scroll;
   overflow-x: hidden;
   overflow-y: hidden;
@@ -1192,6 +1216,30 @@ div.multi-column div {
   font-weight: bold;
   margin-bottom:1em;
 }
+
+/* On screens that are less than 700px wide, make the sidebar into a topbar */
+@media screen and (max-width: 700px) {
+  .sphinxsidebar {
+    top: 64px;
+    /*overflow-x: hidden;
+    overflow-y: hidden;*/
+    width: 100%;
+    height: auto;
+    position: relative;
+  }
+  /*.sidebar a {float: left;}*/
+  div.content {margin-left: 0;}
+}
+
+/* On screens that are less than 400px, display the bar vertically, instead of horizontally
+@media screen and (max-width: 400px) {
+  .sphinxsidebar a {
+    text-align: center;
+    float: none;
+  }
+}
+*/
+
 .toc h3 a {
   color:#404244
 }
@@ -1254,7 +1302,8 @@ div.multi-column div {
 }
 .bodywrapper .naviNextPrevious {
   margin-top:25px;
-  max-width:100%
+  max-width:100%;
+  position: relative;
 }
 .naviNextPrevious.headerNavi,
 p.naviNextPrevious + p {
@@ -1353,7 +1402,7 @@ li a.active {
   min-height:1.25em
 }
 .bodywrapper .qmldoc {
-  margin-top:0.75em
+  margin-top:0.75em;
 }
 .body h2 {
   margin-top: 1.5em;
@@ -1489,7 +1538,7 @@ pre, .LegaleseLeft {
 }
 .bodywrapper .LegaleseLeft p {
   color:#fff;
-  white-space: pre-wrap
+  white-space: pre-wrap;
 }
 pre .str,code .str {
   color:#aaaaaa
diff --git a/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css b/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css
index 625a2d39b..6b9fe3f05 100644
--- a/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css
+++ b/sources/shiboken6/doc/_themes/pysidedocs/static/pyside.css
@@ -37,7 +37,20 @@ div.admonition a:last-child:after {
 }
 
 .body {
-    width: 100%
+    width: 100%;
+  background-color: #00FF00;
+  clear: both;
+  display:inline-block;
+  background-color:#fff;
+  padding: 25px 35px 20px 30px;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  -ms-box-sizing:border-box;
+  box-sizing:border-box;
+}
+.bodywrapper {
+    position: relative;
+    /*background-color: #0000ff;*/
 }
 .bodywrapper .admonition p.admonition-title {
   margin-bottom:5px
@@ -112,6 +125,14 @@ h2 em {
 
 .documentwrapper {
     margin-left: 255px;
+    position: relative;
+}
+@media screen and (max-width: 700px) {
+    .documentwrapper {
+        clear: both;
+        margin-left: 0px;
+        position: relative;
+    }
 }
 
 .body blockquote {
@@ -123,9 +144,10 @@ h2 em {
 .sphinxsidebar {
     float: left;
     width: 186px;
-    padding: 25px;
+    padding: 15px;
     text-align: left;
     background-color: #fff;
+    clear: both;
 }
 
 .sphinxsidebar ul {
@@ -1112,7 +1134,8 @@ a:hover {
 .main_index .row>div {
   letter-spacing:normal
 }
-.col-1,.body {
+.col-1 {
+  clear: both;
   display:inline-block;
   background-color:#fff;
   padding: 25px 35px 20px 30px;
@@ -1184,6 +1207,7 @@ div.multi-column div {
   position: -webkit-sticky;
   position: sticky;
   top: 64px;
+  width: 200px;
   overflow: scroll;
   overflow-x: hidden;
   overflow-y: hidden;
@@ -1192,6 +1216,30 @@ div.multi-column div {
   font-weight: bold;
   margin-bottom:1em;
 }
+
+/* On screens that are less than 700px wide, make the sidebar into a topbar */
+@media screen and (max-width: 700px) {
+  .sphinxsidebar {
+    top: 64px;
+    /*overflow-x: hidden;
+    overflow-y: hidden;*/
+    width: 100%;
+    height: auto;
+    position: relative;
+  }
+  /*.sidebar a {float: left;}*/
+  div.content {margin-left: 0;}
+}
+
+/* On screens that are less than 400px, display the bar vertically, instead of horizontally
+@media screen and (max-width: 400px) {
+  .sphinxsidebar a {
+    text-align: center;
+    float: none;
+  }
+}
+*/
+
 .toc h3 a {
   color:#404244
 }
@@ -1254,7 +1302,8 @@ div.multi-column div {
 }
 .bodywrapper .naviNextPrevious {
   margin-top:25px;
-  max-width:100%
+  max-width:100%;
+  position: relative;
 }
 .naviNextPrevious.headerNavi,
 p.naviNextPrevious + p {
@@ -1353,7 +1402,7 @@ li a.active {
   min-height:1.25em
 }
 .bodywrapper .qmldoc {
-  margin-top:0.75em
+  margin-top:0.75em;
 }
 .body h2 {
   margin-top: 1.5em;
@@ -1489,7 +1538,7 @@ pre, .LegaleseLeft {
 }
 .bodywrapper .LegaleseLeft p {
   color:#fff;
-  white-space: pre-wrap
+  white-space: pre-wrap;
 }
 pre .str,code .str {
   color:#aaaaaa