1) Make the 'Separator' class more general by moving it to widgets2 and making it usable in .ui files.

2) Change the template tester to use FlowLayout.

src/calibre/gui2/dialogs/template_dialog.ui

@@ -170,9 +170,7 @@
            </property>
           </widget>
          </item>
-         <item row="1" column="0" colspan="4">
+         <item row="1" column="0">
-          <layout class="QHBoxLayout">
-           <item>
             <widget class="QLabel">
              <property name="text">
               <string>T&amp;emplate:</string>
@@ -184,20 +182,9 @@
               <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignVCenter</set>
              </property>
             </widget>
-           </item>
+         </item>
-           <item>
+         <item row="1" column="1" colspan="3">
-            <spacer>
+          <layout class="FlowLayout">
-             <property name="orientation">
-              <enum>Qt::Horizontal</enum>
-             </property>
-             <property name="sizeHint" stdset="0">
-              <size>
-               <width>1</width>
-               <height>0</height>
-              </size>
-             </property>
-            </spacer>
-           </item>
            <item>
             <widget class="QCheckBox" name="break_box">
              <property name="text">
@@ -211,15 +198,9 @@ you the value as well as all the local variables&lt;/p&gt;</string>
             </widget>
            </item>
            <item>
-            <widget class="QFrame" name="frame">
+            <widget class="Separator">
-             <property name="frameShape">
+             <property name="buddy">
-              <enum>QFrame::VLine</enum>
+              <cstring>go_button</cstring>
-             </property>
-             <property name="frameShadow">
-              <enum>QFrame::Raised</enum>
-             </property>
-             <property name="lineWidth">
-              <number>3</number>
              </property>
             </widget>
            </item>
@@ -241,15 +222,9 @@ you the value as well as all the local variables&lt;/p&gt;</string>
             </widget>
            </item>
            <item>
-            <widget class="QFrame" name="frame">
+            <widget class="Separator">
-             <property name="frameShape">
+             <property name="buddy">
-              <enum>QFrame::VLine</enum>
+              <cstring>go_button</cstring>
-             </property>
-             <property name="frameShadow">
-              <enum>QFrame::Raised</enum>
-             </property>
-             <property name="lineWidth">
-              <number>3</number>
              </property>
             </widget>
            </item>
@@ -303,15 +278,9 @@ you the value as well as all the local variables&lt;/p&gt;</string>
             </widget>
            </item>
            <item>
-            <widget class="QFrame" name="frame">
+            <widget class="Separator">
-             <property name="frameShape">
+             <property name="buddy">
-              <enum>QFrame::VLine</enum>
+              <cstring>go_button</cstring>
-             </property>
-             <property name="frameShadow">
-              <enum>QFrame::Raised</enum>
-             </property>
-             <property name="lineWidth">
-              <number>3</number>
              </property>
             </widget>
            </item>
@@ -773,11 +742,21 @@ you the value as well as all the local variables&lt;/p&gt;</string>
    <extends>QPushButton</extends>
    <header>calibre/gui2/widgets2.h</header>
   </customwidget>
+  <customwidget>
+   <class>FlowLayout</class>
+   <extends>QLayout</extends>
+   <header>calibre/gui2/widgets2.h</header>
+  </customwidget>
   <customwidget>
    <class>BoxLayout</class>
    <extends>QBoxLayout</extends>
    <header>calibre/gui2/dialogs/template_dialog_box_layout.h</header>
   </customwidget>
+  <customwidget>
+   <class>Separator</class>
+   <extends>QWidget</extends>
+   <header>calibre/gui2/widgets2.h</header>
+  </customwidget>
   <customwidget>
    <class>CodeEditor</class>
    <extends>QPlainTextEdit</extends>

src/calibre/gui2/preferences/coloring.py

@@ -22,7 +22,7 @@ from calibre.gui2 import (error_dialog, choose_files, pixmap_to_data, gprefs,
                           choose_save_file, open_local_file)
 from calibre.gui2.dialogs.template_dialog import TemplateDialog
 from calibre.gui2.metadata.single_download import RichTextDelegate
-from calibre.gui2.widgets2 import ColorButton, FlowLayout
+from calibre.gui2.widgets2 import ColorButton, FlowLayout, Separator
 from calibre.library.coloring import (Rule, conditionable_columns,
     displayable_columns, rule_from_template, color_row_key)
 from calibre.utils.localization import lang_map
@@ -896,33 +896,6 @@ class RulesView(QListView):  # {{{
 # }}}
 
 
-class Separator(QWidget):  # {{{
-
-    def __init__(self, parent, widget_for_height):
-        QWidget.__init__(self, parent)
-        self.bcol = QColor(QPalette.ColorRole.Text)
-        self.update_brush()
-        self.widget_for_height = widget_for_height
-        self.setSizePolicy(QSizePolicy.Policy.Fixed, QSizePolicy.Policy.MinimumExpanding)
-
-    def update_brush(self):
-        self.brush = QBrush(self.bcol)
-        self.update()
-
-    def sizeHint(self):
-        return QSize(1, self.widget_for_height.height())
-
-    def paintEvent(self, ev):
-        painter = QPainter(self)
-        # Purely subjective: shorten the line a bit to look 'better'
-        r = ev.rect()
-        r.setTop(r.top() + 3)
-        r.setBottom(r.bottom() - 3)
-        painter.fillRect(r, self.brush)
-        painter.end()
-# }}}
-
-
 class EditRules(QWidget):  # {{{
 
     changed = pyqtSignal()

src/calibre/gui2/widgets2.py

@@ -10,7 +10,7 @@ from qt.core import (
     QFontInfo, QFontMetrics, QIcon, QKeySequence, QLabel, QLayout, QMenu, QMimeData,
     QPalette, QPixmap, QPoint, QPushButton, QRect, QScrollArea, QSize, QSizePolicy,
     QStyle, QStyledItemDelegate, Qt, QTabWidget, QTextBrowser, QToolButton, QTextCursor,
-    QUndoCommand, QUndoStack, QUrl, QWidget, pyqtSignal
+    QUndoCommand, QUndoStack, QUrl, QWidget, pyqtSignal, QBrush, QPainter
 )
 
 from calibre.ebooks.metadata import rating_to_stars
@@ -439,6 +439,42 @@ class FlowLayout(QLayout):  # {{{
         return w
 # }}}
 
+class Separator(QWidget):  # {{{
+
+    ''' Vertical separator lines usable in FlowLayout '''
+
+    def __init__(self, parent, widget_for_height=None):
+        '''
+        You must provide a widget in the layout either here or with setBuddy.
+        The height of the separator is computed using this widget,
+        '''
+        QWidget.__init__(self, parent)
+        self.bcol = QColor(QPalette.ColorRole.Text)
+        self.update_brush()
+        self.widget_for_height = widget_for_height
+        self.setSizePolicy(QSizePolicy.Policy.Fixed, QSizePolicy.Policy.MinimumExpanding)
+
+    def update_brush(self):
+        self.brush = QBrush(self.bcol)
+        self.update()
+
+    def setBuddy(self, widget_for_height):
+        ''' See __init__. This is repurposed to support Qt Designer .ui files. '''
+        self.widget_for_height = widget_for_height
+
+    def sizeHint(self):
+        return QSize(1, 1 if self.widget_for_height is None else self.widget_for_height.height())
+
+    def paintEvent(self, ev):
+        painter = QPainter(self)
+        # Purely subjective: shorten the line a bit to look 'better'
+        r = ev.rect()
+        r.setTop(r.top() + 3)
+        r.setBottom(r.bottom() - 3)
+        painter.fillRect(r, self.brush)
+        painter.end()
+# }}}
+
 
 class HTMLDisplay(QTextBrowser):