[BUG] : Breeze messes up Layout, widgets appear overlapped/cropped

[EsGeh]

Description

Adding Breeze stylesheets changes the layout in ways, that make widgets appear overlapped/cropped.

Could this be a result of breeze adding margin and/or padding to widgets, which results in a mismatch between sizeHint() and the actual widget sizes?
Why is the layout messed up?

Prerequisites

If applicable to the issue, here are a few things you should provide to help me understand the issue:

Qt version: 6
Extension: None

Test case

See attached images!

Without breeze:

After adding breeze stylesheets:

Qt Designer object view:

This is the .ui file:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>FunctionDisplayOptions</class>
 <widget class="QDialog" name="FunctionDisplayOptions">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>377</width>
    <height>734</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Dialog</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <property name="leftMargin">
    <number>0</number>
   </property>
   <property name="topMargin">
    <number>0</number>
   </property>
   <property name="rightMargin">
    <number>0</number>
   </property>
   <property name="bottomMargin">
    <number>0</number>
   </property>
   <item>
    <widget class="QScrollArea" name="scrollArea">
     <property name="frameShape">
      <enum>QFrame::Shape::NoFrame</enum>
     </property>
     <property name="widgetResizable">
      <bool>true</bool>
     </property>
     <widget class="QWidget" name="scrollAreaWidgetContents">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>377</width>
        <height>685</height>
       </rect>
      </property>
      <layout class="QVBoxLayout" name="verticalLayout_6">
       <item>
        <widget class="QPlainTextEdit" name="largeFormulaEdit">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QLabel" name="label_3">
         <property name="text">
          <string>parameters:</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QPlainTextEdit" name="parametersEdit"/>
       </item>
       <item>
        <widget class="QGroupBox" name="displayBox">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
           <horstretch>0</horstretch>
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
         <property name="title">
          <string>display</string>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout_3">
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_3" stretch="0,1,1">
            <item>
             <widget class="QLabel" name="label_2">
              <property name="text">
               <string>scale</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QDoubleSpinBox" name="scaleX">
              <property name="toolTip">
               <string>Scaling of X-Axis as a power of 2</string>
              </property>
              <property name="minimum">
               <double>-100.000000000000000</double>
              </property>
              <property name="maximum">
               <double>100.000000000000000</double>
              </property>
              <property name="singleStep">
               <double>0.500000000000000</double>
              </property>
              <property name="value">
               <double>0.000000000000000</double>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QDoubleSpinBox" name="scaleY">
              <property name="toolTip">
               <string>Scaling of Y-Axis as a power of 2</string>
              </property>
              <property name="minimum">
               <double>-100.000000000000000</double>
              </property>
              <property name="maximum">
               <double>100.000000000000000</double>
              </property>
              <property name="singleStep">
               <double>0.500000000000000</double>
              </property>
              <property name="value">
               <double>0.000000000000000</double>
              </property>
             </widget>
            </item>
           </layout>
          </item>
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_2" stretch="0,1,1">
            <property name="sizeConstraint">
             <enum>QLayout::SizeConstraint::SetMinimumSize</enum>
            </property>
            <item>
             <widget class="QLabel" name="label">
              <property name="text">
               <string>origin</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QDoubleSpinBox" name="originX">
              <property name="enabled">
               <bool>true</bool>
              </property>
              <property name="minimum">
               <double>-100.000000000000000</double>
              </property>
              <property name="maximum">
               <double>100.000000000000000</double>
              </property>
              <property name="singleStep">
               <double>0.100000000000000</double>
              </property>
              <property name="value">
               <double>0.000000000000000</double>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QDoubleSpinBox" name="originY">
              <property name="enabled">
               <bool>true</bool>
              </property>
              <property name="minimum">
               <double>-100.000000000000000</double>
              </property>
              <property name="maximum">
               <double>100.000000000000000</double>
              </property>
              <property name="singleStep">
               <double>0.100000000000000</double>
              </property>
              <property name="value">
               <double>0.000000000000000</double>
              </property>
             </widget>
            </item>
           </layout>
          </item>
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_6" stretch="0,0">
            <item>
             <widget class="QCheckBox" name="centeredX">
              <property name="text">
               <string>x-axis centered</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QCheckBox" name="centeredY">
              <property name="text">
               <string>y-axis centered</string>
              </property>
              <property name="checked">
               <bool>true</bool>
              </property>
             </widget>
            </item>
           </layout>
          </item>
          <item>
           <widget class="QCheckBox" name="displayImaginary">
            <property name="text">
             <string>display imaginary part</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QCheckBox" name="autoScrollOnPlayback">
            <property name="text">
             <string>scroll on playback</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
       <item>
        <widget class="QGroupBox" name="playbackBox">
         <property name="title">
          <string>playback</string>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout_2">
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_5">
            <item>
             <widget class="QLabel" name="speedLbl">
              <property name="text">
               <string>speed factor</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QDoubleSpinBox" name="speed">
              <property name="sizePolicy">
               <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
                <horstretch>0</horstretch>
                <verstretch>0</verstretch>
               </sizepolicy>
              </property>
              <property name="maximum">
               <double>1000.000000000000000</double>
              </property>
              <property name="singleStep">
               <double>0.100000000000000</double>
              </property>
              <property name="value">
               <double>1.000000000000000</double>
              </property>
             </widget>
            </item>
           </layout>
          </item>
         </layout>
        </widget>
       </item>
       <item>
        <widget class="QGroupBox" name="displayBox_2">
         <property name="title">
          <string>resolution / caching</string>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout_5">
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_17" stretch="0,0">
            <property name="sizeConstraint">
             <enum>QLayout::SizeConstraint::SetDefaultConstraint</enum>
            </property>
            <item>
             <widget class="QLabel" name="label_11">
              <property name="text">
               <string>resolution</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QSpinBox" name="resolution">
              <property name="enabled">
               <bool>true</bool>
              </property>
              <property name="maximum">
               <number>48000</number>
              </property>
             </widget>
            </item>
           </layout>
          </item>
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_19" stretch="0,0">
            <property name="sizeConstraint">
             <enum>QLayout::SizeConstraint::SetMinimumSize</enum>
            </property>
            <item>
             <widget class="QLabel" name="label_13">
              <property name="text">
               <string>interpolation</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QSpinBox" name="interpolation">
              <property name="enabled">
               <bool>true</bool>
              </property>
              <property name="maximum">
               <number>7</number>
              </property>
             </widget>
            </item>
           </layout>
          </item>
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_20" stretch="0,0">
            <property name="sizeConstraint">
             <enum>QLayout::SizeConstraint::SetMinimumSize</enum>
            </property>
            <item>
             <widget class="QLabel" name="label_14">
              <property name="text">
               <string>periodic</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QDoubleSpinBox" name="periodic">
              <property name="enabled">
               <bool>true</bool>
              </property>
              <property name="decimals">
               <number>3</number>
              </property>
              <property name="maximum">
               <double>88200.000000000000000</double>
              </property>
             </widget>
            </item>
           </layout>
          </item>
          <item>
           <layout class="QHBoxLayout" name="horizontalLayout_18" stretch="0,0">
            <property name="sizeConstraint">
             <enum>QLayout::SizeConstraint::SetMinimumSize</enum>
            </property>
            <item>
             <widget class="QLabel" name="label_12">
              <property name="text">
               <string>buffered</string>
              </property>
             </widget>
            </item>
            <item>
             <widget class="QCheckBox" name="buffered">
              <property name="text">
               <string>on / off</string>
              </property>
             </widget>
            </item>
           </layout>
          </item>
         </layout>
        </widget>
       </item>
      </layout>
     </widget>
    </widget>
   </item>
   <item>
    <layout class="QVBoxLayout" name="verticalLayout_7">
     <property name="leftMargin">
      <number>9</number>
     </property>
     <property name="topMargin">
      <number>9</number>
     </property>
     <property name="rightMargin">
      <number>9</number>
     </property>
     <property name="bottomMargin">
      <number>9</number>
     </property>
     <item>
      <widget class="QDialogButtonBox" name="buttonBox">
       <property name="orientation">
        <enum>Qt::Orientation::Horizontal</enum>
       </property>
       <property name="standardButtons">
        <set>QDialogButtonBox::StandardButton::Cancel|QDialogButtonBox::StandardButton::Ok</set>
       </property>
      </widget>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections>
  <connection>
   <sender>buttonBox</sender>
   <signal>accepted()</signal>
   <receiver>FunctionDisplayOptions</receiver>
   <slot>accept()</slot>
   <hints>
    <hint type="sourcelabel">
     <x>248</x>
     <y>254</y>
    </hint>
    <hint type="destinationlabel">
     <x>157</x>
     <y>274</y>
    </hint>
   </hints>
  </connection>
  <connection>
   <sender>buttonBox</sender>
   <signal>rejected()</signal>
   <receiver>FunctionDisplayOptions</receiver>
   <slot>reject()</slot>
   <hints>
    <hint type="sourcelabel">
     <x>316</x>
     <y>260</y>
    </hint>
    <hint type="destinationlabel">
     <x>286</x>
     <y>274</y>
    </hint>
   </hints>
  </connection>
 </connections>
</ui>

[Inverted-E]

I've noticed this issue in the past too but I always just worked around it by slightly adjusting my window design. I agree that it's worth fixing if we can but in order to retain backwards compatibility (i.e. somebody just wants to add new colors to their existing app) we should make it an option.

A flag in the configure script that defaults to true should do the trick, agreed? Something like

python3 configure.py --styles=all --compiled-resource=compiled_themes.py --no-scale

Where the --no-scale option would be used to run the configure script as it is today (i.e. before the fix is applied).

[Alexhuszagh]

We do modify the margins but not typically at that, and we add to the margins typically, to match the style and also ensure background colors, highlights work correctly. Let me take a look and compare what the actual values are for the layouts from each widget. If you take a look at our template source, we have some manual adjustments of padding and margins:

https://github.com/Alexhuszagh/BreezeStyleSheets/blob/main/template/stylesheet.qss.in

QGroupBox
{
    /* Need to make sure the groupbox doesn't compress below the title. */
    min-height: 1.2em;
    border: 0.04em solid ^midtone^;
    border-radius: 0.09em;
    /**
     * This gives us enough space at the top to ensure we can move the
     * title to be inside the guidelines, and the padding at the top
     * ensures we have space below the title.
     */
    margin-top: 0.5em;
    padding-top: 1em;
}

[Alexhuszagh]

I've created a tracking branch and confirmed this occurs with PyQt5 as well, which allows fast testing. I tried manually disabling all the manual content margins in your UI example and the issue still replicates, so marking this as a high priority issue.