fix: R&D Console, Vending, and chem master

code/modules/asset_cache/asset_list_items.dm

@@ -415,7 +415,7 @@
 		"dna_discovered.gif"	= 'html/dna_discovered.gif',
 		"dna_undiscovered.gif"	= 'html/dna_undiscovered.gif',
 		"dna_extra.gif" 		= 'html/dna_extra.gif'
-)
+	)
 
 /datum/asset/simple/vv
 	assets = list(

code/modules/reagents/chemistry/machinery/chem_master.dm

@@ -154,6 +154,11 @@
 	bottle?.forceMove(A)
 	return ..()
 
+//Insert our custom spritesheet css link into the html
+/obj/machinery/chem_master/ui_base_html(html)
+	var/datum/asset/spritesheet/assets = get_asset_datum(/datum/asset/spritesheet/simple/pills)
+	. = replacetext(html, "<!--customheadhtml-->", assets.css_tag())
+
 /obj/machinery/chem_master/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, \
 										datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
@@ -163,11 +168,6 @@
 		ui = new(user, src, ui_key, "chem_master", name, 500, 550, master_ui, state)
 		ui.open()
 
-//Insert our custom spritesheet css link into the html
-/obj/machinery/chem_master/ui_base_html(html)
-	var/datum/asset/spritesheet/simple/assets = get_asset_datum(/datum/asset/spritesheet/simple/pills)
-	. = replacetext(html, "<!--customheadhtml-->", assets.css_tag())
-
 /obj/machinery/chem_master/ui_data(mob/user)
 	var/list/data = list()
 	data["isBeakerLoaded"] = beaker ? 1 : 0

code/modules/research/rdconsole.dm

@@ -219,8 +219,6 @@ Nothing else in the console has ID requirements.
 
 /obj/machinery/computer/rdconsole/proc/ui_header()
 	var/list/l = list()
-	var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/research_designs)
-	l += "[sheet.css_tag()][RDSCREEN_NOBREAK]"
 	l += "<div class='statusDisplay'><b>[stored_research.organization] Research and Development Network</b>"
 	l += "Available points: <BR>[techweb_point_display_rdconsole(stored_research.research_points, stored_research.last_bitcoins)]"
 	l += "Security protocols: [obj_flags & EMAGGED ? "<font color='red'>Disabled</font>" : "<font color='green'>Enabled</font>"]"
@@ -1075,6 +1073,9 @@ Nothing else in the console has ID requirements.
 /obj/machinery/computer/rdconsole/ui_interact(mob/user)
 	. = ..()
 	var/datum/browser/popup = new(user, "rndconsole", name, 900, 600)
+	var/datum/asset/spritesheet/assets = get_asset_datum(/datum/asset/spritesheet/research_designs)
+
+	popup.add_head_content("<link rel='stylesheet' type='text/css' href='[assets.css_tag()]'>")
 	popup.add_stylesheet("techwebs", 'html/browser/techwebs.css')
 	popup.set_content(generate_ui())
 	popup.open()

code/modules/vending/_vending.dm

@@ -658,6 +658,10 @@ GLOBAL_LIST_EMPTY(vending_products)
 		return
 	return ..()
 
+/obj/machinery/vending/ui_base_html(html)
+	var/datum/asset/spritesheet/assets = get_asset_datum(/datum/asset/spritesheet/vending)
+	. = replacetext(html, "<!--customheadhtml-->", assets.css_tag())
+
 /obj/machinery/vending/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)

tgui-next/packages/tgui/interfaces/Vending.js

@@ -61,7 +61,7 @@ export const Vending = props => {
             );
             return (
               <Table.Row key={product.name}>
-                <Table.Cell>
+                <Table.Cell collapsing>
                   {product.base64 ? (
                     <img
                       src={`data:image/jpeg;base64,${product.img}`}
@@ -71,15 +71,20 @@ export const Vending = props => {
                       }} />
                   ) : (
                     <span
-                      className={classes(['vending32x32', product.path])}
+                      className={classes([
+                        'vending32x32',
+                        product.path,
+                      ])}
                       style={{
                         'vertical-align': 'middle',
                         'horizontal-align': 'middle',
                       }} />
                   )}
-                  <b>{product.name}</b>
                 </Table.Cell>
-                <Table.Cell>
+                <Table.Cell bold>
+                  {product.name}
+                </Table.Cell>
+                <Table.Cell collapsing textAlign="center">
                   <Box color={custom
                     ? 'good'
                     : data.stock[product.name] <= 0
@@ -90,24 +95,26 @@ export const Vending = props => {
                     {data.stock[product.name]} in stock
                   </Box>
                 </Table.Cell>
-                <Table.Cell>
+                <Table.Cell collapsing textAlign="center">
                   {custom && (
                     <Button
+                      fluid
                       content={data.access ? 'FREE' : product.price + ' cr'}
                       onClick={() => act(ref, 'dispense', {
                         'item': product.name,
                       })} />
                   ) || (
                     <Button
+                      fluid
                       disabled={(
                         data.stock[product.namename] === 0
-                        || (
-                          !free
-                          && (
-                            !data.user
-                            || to_pay > data.user.cash
+                          || (
+                            !free
+                            && (
+                              !data.user
+                              || to_pay > data.user.cash
+                            )
                           )
-                        )
                       )}
                       content={!free ? pay_text : 'FREE'}
                       onClick={() => act(ref, 'vend', {
@@ -122,4 +129,4 @@ export const Vending = props => {
       </Section>
     </Fragment>
   );
-};
+};