fixing responsive stuff

Author: webdevnerdstuff

src/documentation/components/examples/ButtonsFieldExample.vue

@@ -22,8 +22,8 @@
 		v-model="drawer"
 		fixed
 		location="right"
-		:scrim="false"
-		temporary
+		:scrim="!mobile ? false : 'transparent'"
+		:temporary="!mobile"
 	>
 		<v-container>
 			<div class="d-flex justify-space-between align-center mb-2">
@@ -146,6 +146,7 @@
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from 'vuetify';
 import {
 	array as yupArray,
 	object as yupObject,
@@ -163,6 +164,7 @@ const optionsSettings = {
 	density: 'comfortable' as const,
 	hideDetails: true,
 };
+const { mobile } = useDisplay();
 
 const buttonVariantOptions = [
 	{

src/documentation/sections/ComponentsSection.vue

@@ -22,7 +22,7 @@
 				v-for="component in componentList"
 				:key="component.title"
 			>
-				<code class="ic mr-2">{{ component.title }}</code>
+				<span><code class="ic mr-2 d-inline-flex">{{ component.title }}</code></span>
 			</template>
 		</v-col>
 
@@ -98,19 +98,6 @@
 			An example of its usage can be found in the <a href="#examples-buttons-field">Buttons Field</a> example within the
 			Examples section below.
 		</v-col>
-
-		<!-- <v-col
-			id="components-field-label"
-			cols="12"
-		>
-			<h3 :class="classes.h3">
-				<a
-					:class="classes.headerA"
-					href="#components-field-label"
-				>#</a>
-				Field Label
-			</h3>
-		</v-col> -->
 	</v-row>
 </template>
 

src/plugin/components/fields/VSFButtonField/VSFButtonField.vue

@@ -412,6 +412,10 @@ function containsSizeUnit(value: string | number): boolean {
 </script>
 
 <style lang="scss" scoped>
+.v-item-group {
+	flex-wrap: wrap;
+}
+
 .vsf-button-field {
 	&__btn-label {
 		color: v-bind(buttontextcolor);