improve mobile rendering

docs/2024/index.html

@@ -9,8 +9,8 @@
     <link rel="icon" type="image/png" href="/favicon.png">
     <meta name="generator" content="Astro v4.16.6">
     <title>Open Source Survey 2024</title>
-    <link rel="stylesheet" href="/_astro/index.Bwym0e9b.css">
-    <script type="module" src="/_astro/hoisted.Ds9AoLUP.js"></script>
+    <link rel="stylesheet" href="/_astro/index.D6S1A38A.css">
+    <script type="module" src="/_astro/hoisted.B9HCrNLa.js"></script>
     <script src="https://cdn.usefathom.com/script.js" data-site="SXTIPBVQ" defer></script>
 </head>
 
@@ -44,7 +44,8 @@
             </div>
         </div>
         <div class="img-wrapper">
-            <div id="q33-container" style="min-height:400px;max-width:900px"></div>
+            <h2>Thinking of the last time you experienced harassment, how did you respond? Choose all that apply.</h2>
+            <div class="highcharts-light" id="q33-container" style="min-height:400px;max-width:900px"></div>
         </div>
         <div class="wrapper">
             <div class="prose">
@@ -54,10 +55,13 @@
             </div>
         </div>
         <div class="img-wrapper">
-            <div id="q42-container" style="min-height:400px;max-width:900px"></div>
+            <h2>Do you currently live in a country other than the one in which you were born?</h2>
+            <div class="highcharts-light" id="q42-container" style="min-height:400px;max-width:900px"></div>
         </div>
         <div class="img-wrapper" style="margin-top:4em">
-            <div id="q43-container" style="min-height:400px;max-width:900px"></div>
+            <h2>Thinking of where you were born, are you a member of an ethnicity or nationality that is considered a
+                minority in that country?</h2>
+            <div class="highcharts-light" id="q43-container" style="min-height:400px;max-width:900px"></div>
         </div>
         <div class="wrapper">
             <div class="prose">
@@ -71,11 +75,19 @@
             </div>
         </div>
         <div class="img-wrapper">
-            <div id="q49-container" style="min-height:300px;max-width:900px"></div>
-            <div id="q17-container" style="min-height:400px;max-width:900px"></div>
-            <div id="q21-container" style="min-height:400px;max-width:900px"></div>
+            <h2>What is your age?</h2>
+            <div class="highcharts-light" id="q49-container" style="min-height:300px;max-width:900px"></div>
         </div>
-        <div class="wrapper" style="padding:0 1em">
+        <div class="img-wrapper" style="margin-top:4em">
+            <h2>Which of the following statements is closest to your beliefs about attribution in software development?
+            </h2>
+            <div class="highcharts-light" id="q17-container" style="min-height:400px;max-width:900px"></div>
+        </div>
+        <div class="img-wrapper" style="margin-top:4em">
+            <h2>Which of the following best describes your practices when making open source contributions?</h2>
+            <div class="highcharts-light" id="q21-container" style="min-height:400px;max-width:900px"></div>
+        </div>
+        <div class="wrapper" style="margin-top:4em;padding:0 1em">
             <div class="prose">
                 <p>Speaking of secure by design, in 2024 we added “security by design” as a new option among things
                     people think about when deciding to use or contribute to open source projects. We wanted to
@@ -87,10 +99,13 @@
             </div>
         </div>
         <div class="img-wrapper" style="margin-top:4em">
-            <div id="q7-container" style="min-height:400px;max-width:900px"></div>
+            <h2>When thinking about whether to use open source software, how important are the following things?</h2>
+            <div class="highcharts-light" id="q7-container" style="min-height:400px;max-width:900px"></div>
         </div>
         <div class="img-wrapper" style="margin-top:4em">
-            <div id="q8-container" style="min-height:400px;max-width:900px"></div>
+            <h2>When thinking about whether to contribute to an open source project, how important are the following
+                things?</h2>
+            <div class="highcharts-light" id="q8-container" style="min-height:400px;max-width:900px"></div>
         </div>
         <div class="wrapper">
             <div class="prose">
@@ -106,10 +121,19 @@
             </div>
         </div>
         <div class="img-wrapper">
-            <div id="q40a-container" style="min-height:320px;max-width:900px"></div>
-            <div id="q40-container" style="min-height:350px;max-width:900px;margin-top:4em"></div>
-            <div id="q54-container" style="min-height:500px;max-width:900px;margin-top:4em"></div>
-            <div id="q54_contributor_ethics-container" style="min-height:230px;max-width:900px;margin-top:4em"></div>
+            <h2>Which is closest to your employer's policy on incorporating open source AI models into your codebase?
+            </h2>
+            <div class="highcharts-light" id="q40a-container" style="min-height:320px;max-width:900px"></div>
+            <h2 style="margin-top:4em">Which is closest to your employer's policy on incorporating open source
+                dependencies into your codebase?</h2>
+            <div class="highcharts-light" id="q40-container" style="min-height:350px;max-width:900px"></div>
+            <h2 style="margin-top:4em">How often do you engage in or observe each of the following activities?</h2>
+            <div class="highcharts-light" id="q54-container" style="min-height:500px;max-width:900px"></div>
+            <h2 style="margin-top:4em">Have awareness of and follow applicable
+                ethics/governance/responsibility/safety/security practices, filtered for respondents who contribute to
+                projects that use AI models or AI infrastructure</h2>
+            <div class="highcharts-light" id="q54_contributor_ethics-container"
+                style="min-height:230px;max-width:900px"></div>
         </div>
         <div class="wrapper">
             <div class="prose">
@@ -120,7 +144,8 @@
             </div>
         </div>
         <div class="img-wrapper">
-            <div id="q55-container" style="min-height:400px;max-width:900px"></div>
+            <h2>How often do you engage in or observe each of the following activities?</h2>
+            <div class="highcharts-light" id="q55-container" style="min-height:400px;max-width:900px"></div>
         </div>
         <div class="wrapper">
             <div class="prose">