online.git: 3 commits - browser/css

["Parth Raiyani (via cogerrit)"]

browser/css/jsdialogs.css | 35 +++++++++++++++++++++++++++++++++++
1 file changed, 35 insertions(+)

New commits:
commit 0854d3db3a137c387f478244584eaeaab58b66df
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Wed May 20 12:06:05 2026 +0000
Commit: Szymon Kłos <szymo...@collabora.com>
CommitDate: Mon May 25 12:26:57 2026 +0000

browser: stretch the Functions-tab Help button to the full FunctionPage width

The Help button at the bottom of the Functions tab is packed in functionpage.ui with expand=False, fill=True inside the vertical FunctionPage GtkBox, so GTK stretches it to the full container width on the desktop. In online the JSDialog pushbutton wrapper is created as a .d-flex justify-content:center container with no explicit width, so wrapper and inner button collapsed to the natural width of the "Help" label and the button rendered as a narrow island below the function list. Set width:100% on both the #help wrapper and the inner #help-button and switch the wrapper's justify-content to stretch; the selector is scoped to #FunctionPage so the dialog-level Help button is unaffected.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I0eeb5c75942a5ba3388fed94da721be5acad8800
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2996
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Szymon Kłos <szymo...@collabora.com>

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index d30564bc34e3..40d5cf94538a 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2728,6 +2728,14 @@ button.has-img img {
padding: 2px;
}

+#FormulaDialog #FunctionPage #help {
+ width: 100%;
+ justify-content: stretch;
+}
+#FormulaDialog #FunctionPage #help-button {
+ width: 100% !important;
+}
+
/* text-area overflow on function wizard window */

#FormulaDialog #ed_formula.ui-textarea {
commit aebe33595c90d2b2978103e688879b1966eaec8e
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Wed May 20 12:04:09 2026 +0000
Commit: Szymon Kłos <szymo...@collabora.com>
CommitDate: Mon May 25 12:26:46 2026 +0000

browser: left-align the Function Wizard header and strip the favorites button chrome

The favorites toggle and bold function name in row 0 of ALTBOX were rendering horizontally centered in the right pane instead of sitting at the left edge, and the favorites button was drawing the dark filled background, 1px border and 32px height that btns.css applies to generic dialog buttons even though parameter.ui specifies relief="none". The JSDialog builder's catch-all multi-child container path sets display:grid and grid-auto-flow:column on the anonymous GtkBox that holds favorites and headline, which lays the items out as auto-sized columns and lets the default justify-content drift them off the left edge. Override the first ALTBOX grid cell to display:flex with justify-content:flex-start, and reset border, background, margin, fixed height and width on the favorites button so only the star icon shows.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I01dd0d944e5258be897030903cdda7219ad5ed12
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2995
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Szymon Kłos <szymo...@collabora.com>

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 26235f5bdef5..d30564bc34e3 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2710,6 +2710,24 @@ button.has-img img {
align-content: start;
}

+#FormulaDialog #ALTBOX > .ui-grid-cell:first-child {
+ display: flex !important;
+ justify-content: flex-start;
+ align-items: center;
+ gap: var(--spacing-xs);
+}
+
+#FormulaDialog #favorites,
+#FormulaDialog #favorites-button {
+ border: none !important;
+ background: transparent !important;
+ margin: 0 !important;
+ height: auto !important;
+ min-width: 0 !important;
+ width: auto !important;
+ padding: 2px;
+}
+
/* text-area overflow on function wizard window */

#FormulaDialog #ed_formula.ui-textarea {
commit e819716793a9e8ed3036172efb518c8ebb6b676d
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Wed May 20 12:01:33 2026 +0000
Commit: Szymon Kłos <szymo...@collabora.com>
CommitDate: Mon May 25 12:26:35 2026 +0000

browser: pin Function Wizard formula bar to the bottom of the right pane

In description mode the right pane was rendering the function header, signature and description at the vertical center of the pane with the Formula label and textarea floating mid-pane instead of sitting at the bottom. Two interacting fixes: give box3 grid-template-rows: auto 1fr auto auto so the second placed row absorbs the slack, and hide ParameterPage in description mode, since m_xParaWinBox->hide() does not propagate to it in online (BOX is flattened out of the DOM by JSDialog and ParameterPage is reparented under box3). With ParameterPage out of the layout ALTBOX shifts into the 1fr row; align-content: start on ALTBOX keeps its three inner rows packed at the top of the now-taller cell.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: If2df87db196bf8699244a3b8ab18e7dc92b48151
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/2994
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Szymon Kłos <szymo...@collabora.com>

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index d257c9962eb9..26235f5bdef5 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2686,6 +2686,11 @@ button.has-img img {
#FormulaDialog #box3 {
display: grid;
min-width: 400px;
+ grid-template-rows: auto 1fr auto auto;
+}
+
+#FormulaDialog #box3:has(#favorites:not(.hidden)) #ParameterPage {
+ display: none !important;
}

#FormulaDialog .ui-tabs-content.jsdialog {
@@ -2701,6 +2706,10 @@ button.has-img img {
font-weight: bold;
}

+#FormulaDialog #ALTBOX {
+ align-content: start;
+}
+
/* text-area overflow on function wizard window */

#FormulaDialog #ed_formula.ui-textarea {