fix: style tweaks for butterfly/oruga; mostly expand fields

src/wuttaweb/templates/appinfo/configure.mako

@@ -112,31 +112,36 @@
       <b-field label="Default Sender">
         <b-input name="${app.appname}.email.default.sender"
                  v-model="simpleSettings['${app.appname}.email.default.sender']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Default Recipient(s)">
         <b-input name="${app.appname}.email.default.to"
                  v-model="simpleSettings['${app.appname}.email.default.to']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Default Subject (optional)">
         <b-input name="${app.appname}.email.default.subject"
                  v-model="simpleSettings['${app.appname}.email.default.subject']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Feedback Recipient(s) (optional)">
         <b-input name="${app.appname}.email.feedback.to"
                  v-model="simpleSettings['${app.appname}.email.feedback.to']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Feedback Subject (optional)">
         <b-input name="${app.appname}.email.feedback.subject"
                  v-model="simpleSettings['${app.appname}.email.feedback.subject']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
     </div>

src/wuttaweb/templates/base.mako

@@ -498,23 +498,26 @@
                        % if request.user:
                            disabled
                        % endif
-                       />
+                       expanded />
             </b-field>
 
             <b-field label="Referring URL">
               <b-input v-model="referrer"
-                       disabled="true" />
+                       disabled="true"
+                       expanded />
             </b-field>
 
             <b-field label="Message"
                      :type="message && message.trim() ? null : 'is-danger'">
               <b-input type="textarea"
                        v-model="message"
-                       ref="textarea" />
+                       ref="textarea"
+                       expanded />
             </b-field>
           </section>
 
           <footer class="modal-card-foot">
+            <div style="display: flex; gap: 0.5rem;">
             <b-button @click="showDialog = false">
               Cancel
             </b-button>
@@ -525,6 +528,7 @@
                       :disabled="submitDisabled">
               {{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
             </b-button>
+            </div>
           </footer>
         </div>
       </${b}-modal>

src/wuttaweb/templates/deform/checked_password.pt

@@ -5,10 +5,12 @@
   <b-input name="${name}"
            value="${field.widget.redisplay and cstruct or ''}"
            type="password"
+           expanded
            placeholder="Password" />
   <b-input name="${name}-confirm"
            value="${field.widget.redisplay and confirm or ''}"
            type="password"
+           expanded
            placeholder="Confirm Password" />
   ${field.end_mapping()}
 </div>

src/wuttaweb/templates/deform/dateinput.pt

@@ -1,6 +1,7 @@
 <div>
   ${field.start_mapping()}
   <wutta-datepicker name="date"
-                    value="${cstruct}" />
+                    value="${cstruct}"
+                    expanded />
   ${field.end_mapping()}
 </div>

src/wuttaweb/templates/deform/datetimeinput.pt

@@ -2,9 +2,11 @@
   ${field.start_mapping()}
   <wutta-datepicker name="date"
                     style="flex-grow: 1;"
+                    expanded
                     value="${date}" />
   <wutta-timepicker name="time"
                     style="flex-grow: 1;"
+                    expanded
                     value="${time}" />
   ${field.end_mapping()}
 </div>

src/wuttaweb/templates/deform/moneyinput.pt

@@ -3,5 +3,6 @@
                       vmodel vmodel|'modelData.'+oid;">
   <b-input name="${name}"
            v-model="${vmodel}"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </tal:omit>

src/wuttaweb/templates/deform/password.pt

@@ -5,5 +5,6 @@
   <b-input name="${name}"
            v-model="${vmodel}"
            type="password"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </div>

src/wuttaweb/templates/deform/textarea.pt

@@ -7,5 +7,6 @@
   <b-input name="${name}"
            v-model="${vmodel}"
            type="textarea"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </div>

src/wuttaweb/templates/deform/textinput.pt

@@ -4,5 +4,6 @@
                  vmodel vmodel|'modelData.'+oid;">
   <b-input name="${name}"
            v-model="${vmodel}"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </div>

src/wuttaweb/templates/themes/butterfly/buefy-components.mako

@@ -373,15 +373,7 @@
         },
         methods: {
             focus() {
-                if (this.type == 'textarea') {
+                this.$refs.input.focus()
-                    // TODO: this does not always work right?
-                    this.$refs.input.$el.querySelector('textarea').focus()
-                } else {
-                    // TODO: pretty sure we can rely on the <o-input> focus()
-                    // here, but not sure why we weren't already doing that?
-                    //this.$refs.input.$el.querySelector('input').focus()
-                    this.$refs.input.focus()
-                }
             },
         },
     }