Mobile compat tweaks

src/nginxconfig/scss/_files.scss

@@ -0,0 +1,31 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.files {
+  h3 {
+    overflow-wrap: break-word;
+  }
+}

src/nginxconfig/scss/_panel.scss

@@ -26,8 +26,10 @@ THE SOFTWARE.
 
 .panel {
   margin-top: 0;
+  max-width: calc(100% - 1rem);
   padding: 1.5rem 0 2rem;
   text-align: left;
+  width: calc(100% - 1rem);
 
   // The presets panel has a custom header with a dropdown indicator
   &.presets {

src/nginxconfig/scss/style.scss

@@ -48,4 +48,5 @@ $highlight: #f2c94c;
   @import "modals";
   @import "setup";
   @import "code";
+  @import "files";
 }

src/nginxconfig/templates/app.vue

@@ -33,10 +33,10 @@ THE SOFTWARE.
             <template v-slot:header>
             </template>
             <template v-slot:buttons>
-                <a v-if="splitColumn" class="button is-primary is-outline" @click="splitColumn = false">
+                <a v-if="splitColumn" class="button is-primary is-outline is-hidden-touch" @click="splitColumn = false">
                     {{ i18n.templates.app.singleColumnMode }}
                 </a>
-                <a v-else class="button is-primary" @click="splitColumn = true">
+                <a v-else class="button is-primary is-hidden-touch" @click="splitColumn = true">
                     {{ i18n.templates.app.splitColumnMode }}
                 </a>
             </template>
@@ -44,7 +44,7 @@ THE SOFTWARE.
 
         <div class="main container" :style="{ display: ready ? undefined : 'none' }">
             <div class="columns is-multiline">
-                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
+                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
                     <h2>{{ i18n.templates.app.perWebsiteConfig }}</h2>
 
                     <div class="tabs">
@@ -77,9 +77,9 @@ THE SOFTWARE.
                     <Setup :data="{ domains: domains.filter(d => d !== null), global, confFiles }"></Setup>
                 </div>
 
-                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
+                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
                     <h2>{{ i18n.templates.app.configFiles }}</h2>
-                    <div ref="files" class="columns is-multiline">
+                    <div ref="files" class="columns is-multiline files">
                         <NginxPrism v-for="confContents in confFilesOutput"
                                     :key="confContents[2]"
                                     :name="confContents[0]"