Tips to maximize the working space of the layout.

NovaTweaks.md

Design Tweaks for Base Nova Installation

I like to maximize the working space of a dashboard so here's a few tips to accomplish that with Larave Nova.

Minimize Horizontal and Vertical Padding of Page Layout.

nova/resources/css/app.css

/**
 * Nova CSS Tweaks (add to line 3)
 */
.py-view,
.px-view{
  padding: 20px !important;
}

Change Default Field to Stacked

nova/resources/js/components/Form/DefaultField.vue

You can overload this component using Vue.component, or simply edit the Nova Component itself.

<template>
    <field-wrapper>
        <div class="w-full">
            <!-- Add FullWidth Columns & Adjust Padding -->
            <div :class="(fullWidthContent ? 'w-full' : 'w-1/5') + ' px-4 py-1'">
                <slot>
                    <form-label
                        :label-for="field.attribute"
                        :class="{ 'mb-2': showHelpText && field.helpText }"
                    >
                        {{ fieldLabel }}
                    </form-label>
                </slot>
            </div>
            <div :class="(fullWidthContent ? 'w-full' : fieldClasses) + ' px-4 py-1'">

                <slot name="field" />

                <help-text class="error-text mt-2 text-danger" v-if="showErrors && hasError">
                    {{ firstError }}
                </help-text>

                <help-text class="help-text mt-2" v-if="showHelpText"> {{ field.helpText }} </help-text>
            </div>
        </div>
    </field-wrapper>
</template>