From 0396d314d567dd1320583b086f117dec1d50a61f Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sat, 12 Oct 2024 00:19:29 +0200
Subject: [PATCH] oh-input: Fix style issue on mobile when sendButton enabled &
 Update docs (#2806)

This fixes a minor styling issue on mobile devices, where the input's
column is too wide and the sendButton overflows to the next line. Also
add `time` to the docs for valid input types.

---------

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 bundles/org.openhab.ui/doc/components/oh-input-card.md          | 2 +-
 bundles/org.openhab.ui/doc/components/oh-input-item.md          | 2 +-
 bundles/org.openhab.ui/doc/components/oh-input.md               | 2 +-
 .../web/src/assets/definitions/widgets/system/input.js          | 2 +-
 .../web/src/components/widgets/system/oh-input.vue              | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/bundles/org.openhab.ui/doc/components/oh-input-card.md b/bundles/org.openhab.ui/doc/components/oh-input-card.md
index c74fe0f865..ec5997092b 100644
--- a/bundles/org.openhab.ui/doc/components/oh-input-card.md
+++ b/bundles/org.openhab.ui/doc/components/oh-input-card.md
@@ -67,7 +67,7 @@ Display an input in a card
 </PropBlock>
 <PropBlock type="TEXT" name="type" label="Type">
   <PropDescription>
-    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
+    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="inputmode" label="Input Mode">
diff --git a/bundles/org.openhab.ui/doc/components/oh-input-item.md b/bundles/org.openhab.ui/doc/components/oh-input-item.md
index dbfee067ed..d08ef81018 100644
--- a/bundles/org.openhab.ui/doc/components/oh-input-item.md
+++ b/bundles/org.openhab.ui/doc/components/oh-input-item.md
@@ -72,7 +72,7 @@ Display an input field in a list
 </PropBlock>
 <PropBlock type="TEXT" name="type" label="Type">
   <PropDescription>
-    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
+    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="inputmode" label="Input Mode">
diff --git a/bundles/org.openhab.ui/doc/components/oh-input.md b/bundles/org.openhab.ui/doc/components/oh-input.md
index fce29358f6..2a6ca0d24e 100644
--- a/bundles/org.openhab.ui/doc/components/oh-input.md
+++ b/bundles/org.openhab.ui/doc/components/oh-input.md
@@ -35,7 +35,7 @@ Displays an input field, used to set a variable
 </PropBlock>
 <PropBlock type="TEXT" name="type" label="Type">
   <PropDescription>
-    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
+    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="inputmode" label="Input Mode">
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js
index ff250216f6..2672d133e1 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js
@@ -2,7 +2,7 @@ import { pi, pb, pt, pd } from '../helpers.js'
 
 export default () => [
   pt('name', 'Name', 'Input name'),
-  pt('type', 'Type', 'Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)'),
+  pt('type', 'Type', 'Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)'),
   pt('inputmode', 'Input Mode', 'Type of data that might be entered (see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>)'),
   pt('placeholder', 'Placeholder', 'Placeholder text'),
   pb('sendButton', 'Send button', 'Display Send button to update the state with a command (needs a configured item)'),
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue
index 8f715971bd..fe79dd9e93 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue
@@ -8,7 +8,7 @@
     </template>
   </f7-input>
   <f7-row no-gap v-else class="oh-input-with-send-button" :style="config.style">
-    <f7-input class="input-field col-90" ref="input" v-bind="config"
+    <f7-input class="input-field col-80" ref="input" v-bind="config"
               :value="((config.type && config.type.indexOf('date') === 0) || config.type === 'time') ? valueForDatepicker : value"
               :calendar-params="calendarParams" :step="config.step ? config.step : 'any'"
               @input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated">