I'm not able to edit my original post so I'll be posting it here. Credits: ChatGPT
There are two ways, both includes editing lookup.js (located at calibre/app/resource/lookup.js or usr/share/calibre/lookup.js in linux)
Option 1. This is the one I use but might break in the future, please replace the entire code of lookup.js with this one.
Code:
/* vim:fileencoding=utf-8
*
* Copyright (C) 2019 Kovid Goyal <kovid at kovidgoyal.net>
*
* Distributed under terms of the GPLv3 license
*/
(function() {
"use strict";
var num_tries = 0;
// apply the 3px indent to any level-1 define heading
function indentHeadings() {
document.querySelectorAll('span[role="heading"][aria-level="1"]')
.forEach(function(el) {
el.style.position = 'relative';
el.style.left = '3px';
});
}
function fix_google_markup() {
var cc = document.getElementById('center_col');
if (!cc) {
if (++num_tries > 10) return;
setTimeout(fix_google_markup, 100);
return;
}
// zero-out column gaps everywhere
var style = document.createElement('style');
style.textContent = `
* {
column-gap: 0px !important;
-webkit-column-gap: 0px !important;
}
`;
document.head.appendChild(style);
var max_width = 'calc(100vw - 25px)';
cc.style.maxWidth = max_width;
cc.style.marginLeft = '0';
var rcnt = document.getElementById('rcnt');
if (rcnt) rcnt.style.marginLeft = '0';
var cnt = document.getElementById('cnt');
if (cnt) cnt.style.paddingTop = '0';
var s = document.getElementById('search');
if (s) s.style.maxWidth = max_width;
var params = new URLSearchParams(location.search.slice(1));
var q = params.get('q');
if (q && q.startsWith('define:')) {
// inline layout tweaks for define: results
cc.style.position = 'absolute';
cc.style.top = '0';
cc.style.left = '0';
cc.style.paddingLeft = '0';
cc.style.paddingRight = '6px';
['sfcnt','top_nav','before-appbar','appbar',
'searchform','easter-egg','topstuff']
.forEach(function(id) {
var e = document.getElementById(id);
if (e) e.style.display = 'none';
});
// wrap definition text
document.querySelectorAll('[data-topic]')
.forEach(e => e.style.maxWidth = max_width);
// now that the define: block is up, indent headings
indentHeadings();
// observe any future DOM changes in center_col and re-indent
new MutationObserver(indentHeadings)
.observe(cc, { childList: true, subtree: true });
}
// remove the promo sidebar if present
var promo = document.getElementById('promos');
if (promo) promo.remove();
// wrap search results
document.querySelectorAll('[data-ved]')
.forEach(e => e.style.maxWidth = max_width);
// prevent overlap of search results + citations
document.querySelectorAll('cite').forEach(function(elem) {
var wrapper = elem.closest('div');
if (wrapper) wrapper.style.position = 'static';
});
}
if (location.hostname === 'www.google.com') {
window.addEventListener('DOMContentLoaded', fix_google_markup);
}
})();
Option 2: Has a minor bug where it hides first letter of the heading, not an issue as the same word is visible below. This won't break with updates, just replace again.
Code:
var cc = document.getElementById('center_col');
// --- paste this code below the above line, ctrl+f in your fav text editor to find the line ---
var style = document.createElement('style');
style.textContent = `
* {
column-gap: 0px !important;
-webkit-column-gap: 3px !important;
}
`;
document.head.appendChild(style);
// --- and the between the below line, you can leave this comment if you'd like ---
var max_width = 'calc(100vw - 25px)';